﻿<Demos xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="Demos.xsd">
    <DemoProduct Key="Integration" Url="MVC" IsRootDemo="true" IsMvc="true" Title="DevExpress Extensions for ASP.NET MVC" NavItemTitle="Over 50 MVC Extensions" SeoTitle="DevExpress Extensions for ASP.NET MVC">
      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://go.devexpress.com/DevExpress_AspDemos_Mvc_Doc.aspx
      </DocUrl>


      <Intro Title="Online Demos" SeoTitle="ASP.NET MVC Extension Demos">
        <BannerTitle></BannerTitle>
        <BannerText></BannerText>
        <BannerImageUrl></BannerImageUrl>
        <BannerUrl></BannerUrl>
        <BannerVideoButtonImageUrl></BannerVideoButtonImageUrl>
        <BannerLinkText></BannerLinkText>
        <DescriptionTitle></DescriptionTitle>
        <Description></Description>
      </Intro>
    </DemoProduct>

    <DemoProduct Key="GridView" Url="MVCxGridViewDemos" IsMvc="true" Title="Grid View" SeoTitle="ASP.NET MVC Extensions - Grid View" NavItemTitle="Grid View" OrderIndex="0" IntegrationHighlighted="true">
      <Keywords>gridview, table, datatable, datagrid, grid, webgrid</Keywords>
      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument8966
      </DocUrl>

      <IntegrationImageUrl>~/Content/Grid.png</IntegrationImageUrl>
      <IntegrationDescription>
        Unlimited master-detail levels, Web Accessibility support, and unmatched end-user data analysis capabilities
      </IntegrationDescription>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Extensions - Grid View">
        <BannerTitle>
          Blazing Fast and Lightweight Data Grid for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          The DevExpress GridView extension for ASP.NET MVC is a feature-complete grid with built-in data editors. 
          With blazing fast data loading, efficient memory footprint, extensive data shaping options and integrated touch support for iOS, Android, and Windows Phone,
          the grid allows you to deliver elegant and highly functional Outlook inspired end-user experiences with ease - for both desktop and mobile web browsers.
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=sPMbo0qMlps</BannerUrl>
        <DescriptionTitle>
          Welcome to the online demo site of the ASPxGridView and Editors Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
            <p>
                This website demonstrates some of the many features and capabilities available to you when using our Grid View Extension and data editors library. These features include:
            </p>
            ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <Description>
          <![CDATA[
            <p>The DevExpress ASP.NET MVC Grid View extension is a feature-complete grid with built-in data editors.</p>
            <p>Follow the three simple steps below to add a DevExpress GridView extension and bind it to your data. It's easy as “M”, “V”, and “C”.</p>
            <p>
            1. Model (the "M" in MVC). First, you will need a Model object for the DevExpress ASP.NET MVC Grid View to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. However, you can use any model that supports the IEnumerable or IQueryable interface (<helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument14722">learn more in our online documentation</helplink>).
            </p>
            <p>
            2. View (the "V" in MVC). Next, declare the ASP.NET MVC Grid View extension inside of the View. Specifically, we'll create a Partial View because the DevExpress GridView extension provides AJAX callbacks by default to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the GridView extension inside of the Partial View and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property:
            </p>
            <p>Partial View code:</p>
            <code lang="html">
              @Html.DevExpress().GridView(settings => {
                  settings.Name = "gvOverview";
                  settings.CallbackRouteValues = new { 
                    Controller = "Overview", Action = "OverviewPartial" };
                  settings.Columns.Add("ShipName");
                  settings.Columns.Add("ShipCity");
                  settings.Columns.Add("ShipPostalCode");
                  settings.Columns.Add("ShipCountry");
                  settings.SettingsPager.NumericButtonCount = 6;
              }).Bind(Model).GetHtml()
            </code>
            <br/>
            <p>
            3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that handle GridView's callbacks. The "OverviewPartial" action method below handles the callbacks. While the <b>GetOrders</b> action method gets the data from the model to pass to the View. As you can see, the native DevExpress GridView extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.</p>
            <p>Controller code:</p>
            <code lang="CSharp">
              public class HomeController: Controller {
                public ActionResult Index() {
                  return View("Overview", GetOrders());
                }
                public ActionResult OverviewPartial() {
                  return PartialView("OverviewPartial", GetOrders());
                }
                public IEnumerable GetOrders() {
                  NorthwindDataContext DB = new NorthwindDataContextExt();
                  return from order in DB.Orders select order;
                }
              }
            </code>
            <p><a href="http://www.youtube.com/watch?v=sPMbo0qMlps&amp;list=PL8h4jt35t1wh8cb26PSN9nv08wBqS4iPz&amp;index=2">Watch a short nine-minute getting started video now</a> to learn about the DevExpress GridView extension for ASP.NET MVC.</p>
        ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/user/DeveloperExpress/search?query=ASP.NET+MVC+GridView" Title="Training Videos" />
        <SeeAlso Url="http://documentation.devexpress.com/#AspNet/CustomDocument14606" Title="Code Examples" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8966" Title="Documentation" />
        <KeyFeature Name="Binding to Large Data">
          <Description>
            <![CDATA[
             Regardless of the dataset size, you can use countless GridView's features (including a built-in printing engine) for instant ad-hoc reporting, without compromising performance.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Master-Detail Support ">
          <Description>
            <![CDATA[
             GridView allows you to present master-detail information of any complexity.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Built-in Edit Modes">
          <Description>
            <![CDATA[
             GridView provides four built-in edit modes: via the Edit Form and Popup Edit Form, Batch editing and In-Line editing.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Automatic Data Sorting and Grouping">
          <Description>
            <![CDATA[
             GridView allows your end-users to sort and group data against an unlimited number of columns, providing tools for analyzing and editing information.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Full Data Summaries">
          <Description>
            <![CDATA[
             Summaries allow you to present statistical information such as MIN, MAX, AVG, SUM and COUNT directly within the grid itself, without the need for a workaround that requires the use of individual edit controls. You can also handle summary-specific events to implement complex functions with ease. Standard deviation and many other statistical formulas are now included.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Filtering by Values and Display Text">
          <Description>
            <![CDATA[
             For each column, you can specify the way in which to filter the column's data - by edit values or display values.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Band Columns">
          <Description>
            <![CDATA[
             The GridView's multi-row headers feature allows you to organize grid columns in logical groups (bands).
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Built-in Pager">
          <Description>
            <![CDATA[
             GridView automatically splits content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Template Technology">
          <Description>
            <![CDATA[
             Templates are fully supported. For each element within GridView, you can customize the appearance or layout using any HTML content.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Rich Client-Side Functionality">
          <Description>
            <![CDATA[
             A comprehensive client-side API is available for GridView. This functionality, coupled with the ability to handle events on the client side, allows you to have full control over the grid's behavior on the client side.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Export">
          <Description>
            <![CDATA[
             GridView allows you to export its data to PDF, XLS and RTF formats.
            ]]>
          </Description>
        </KeyFeature>
      </Overview>
      
      <DemoGroup Key="DataBinding" Title="Data Binding">
        <Keywords>databinding</Keywords>
        <Demo Key="DataBinding" Title="Live Data" SeoTitle="Real-time Data Processing">
          <Description>
            <![CDATA[<p>
                This demo illustrates how the DevExpress ASP.NET MVC Grid View can be bound to a Model passed to a View from the Controller. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_Bindtopic">Bind</helplink> method is used to bind the ASP.NET MVC Grid View to the Model. As a Model for this demo, we use a message list retrieved from our twitter page.
            </p><p>
                The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomColumnDisplayTexttopic">CustomColumnDisplayText</helplink> method's delegate is used to change the text within the text column cells. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_SetStatusBarTemplateContenttopic">SetStatusBarTemplateContent</helplink> method is utilized to create a template for the grid's status bar and to display a refresh message within it.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Quotes.cs</SourceFile>
          <SourceFile>~/Views/DataBinding/DataBindingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="DataBindingToLargeDatabase" Title="Data Binding to Large Database" SeoTitle="Data Binding to Large Database"
            HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/ServerMode.png" HighlightedTitle="300,000 Records via LINQ">
          <Keywords>databinding, largedata, bigdata, server mode, database server mode, high performance, fast</Keywords>
          <Description>
            <![CDATA[
                <p>This demo illustrates how the DevExpress ASP.NET MVC Grid View can be bound to a large databases using LINQ to SQL.</p>
                <p>With the ASP.NET MVC Grid View, you can easily bind to LINQ to SQL data sources via the extension's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_BindToLINQtopic">BindToLINQ</helplink> method. Simply call the method, pass the DataContext and table name as method parameters, and specify the key field via the GridView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_KeyFieldNametopic">KeyFieldName</helplink> property. Internally, the <b>BindToLINQ</b> method uses our <b>LinqServerModeDataSource</b> component, which was specifically designed to allow the Grid View MVC Extension to efficiently process large amounts of data. The <b>LinqServerModeDataSource</b> component automatically enables server mode to optimize the execution of all LINQ queries initiated by the Grid View. In this mode, the Grid View loads records on demand and performs data-aware operations (sorting, filtering, grouping, etc.) on the data server. This technique significantly improves the Grid View's speed and responsiveness.</p>
                <p>You can explore the performance of the DevExpress ASP.NET MVC Grid View by executing data shaping operations against it (sorting, filtering, and grouping). Note how quickly the Grid View calculates summaries against 300,000 records.</p>
                ]]>
          </Description>
          <HighlightedDescription>The DevExpress ASP.NET MVC Grid View extension supports a specific binding mode designed to efficiently work with large datasets. Within this binding mode, data-aware operations (sorting, grouping, etc.) are performed on the database server side. This demo illustrates how the GridView extension works easily and quickly with a data source consisting of 300,000 records.</HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/DataBinding/DataBindingToLargeDatabasePartial.cshtml</SourceFile>
          <SourceFile>~/Views/DataBinding/PerformanceTestPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="SimpleCustomBinding" Title="Custom Data Binding (Simple)" SeoTitle="Simple Custom Data Binding">
          <Description>
            <![CDATA[
<p>
DevExpress ASP.NET MVC Grid View supports custom data binding that allows you to perform all data operations, such as paging, sorting, filtering, grouping and summary calculation, completely by yourself. 
</p>

<p>
In this mode, you handle data operations in corresponding Action methods; the correspondence is defined by populating the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomBindingRouteValuesCollectiontopic">CustomBindingRouteValuesCollection</helplink>.
</p>

<p>
In each specified Action, the processed operation related state information, such as a column state (i.e., which column is sorted and in which direction) or a pager state (which page is selected), is passed automatically. The grid's current state (view model) can be obtained via the static <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_GetViewModeltopic">GridViewExtension.GetViewModel</helplink> method and can be updated with the processed operation state. Then, the required data should be provided for the grid view  model via a call to its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewModel_ProcessCustomBindingtopic">ProcessCustomBinding</helplink> method.
</p>

<p>
The <b>ProcessCustomBinding</b> method has several overloads. You can select a particular one depending on which data operations you need to handle. 
</p>

<p>
Generally, this method provides the following parameters representing typed method delegates:
</p>

<p>
getDataRowCountMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataRowCountHandlertopic">GridViewCustomBindingGetDataRowCountHandler</helplink> type<br/>
Provide implementation for this method to return the total number of data rows.
</p>
<p>
getDataMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataHandlertopic">GridViewCustomBindingGetDataHandler</helplink> type<br/>
Provide implementation for this method to return the required data rows to the grid.
</p>
<p>
getSummaryValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetSummaryValuesHandlertopic">GridViewCustomBindingGetSummaryValuesHandler</helplink> type<br/>
Provide implementation for this method to calculate and return values of summaries required within the grid.
</p>
<p>
getGroupingInfoMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetGroupingInfoHandlertopic">GridViewCustomBindingGetGroupingInfoHandler</helplink> type<br/>
Provide implementation for this method to return data rows for visible and expanded groups in the required order that depends on the applied grouping and sorting.
</p>
<p>
getUniqueHeaderFilterValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetUniqueHeaderFilterValuesHandlertopic">GridViewCustomBindingGetUniqueHeaderFilterValuesHandler</helplink> type<br/>
Provide implementation for this method to return unique values to be displayed in the header filter popup list invoked for a column.
</p>

<p>
The resulting grid state (view model) is returned as a model to a view that contains GridView. To bind GridView to this view model, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_BindToCustomDatatopic">BindToCustomData</helplink> method.
</p>

<p>
This demo shows a simple implementation of custom data binding - only sorting and paging operations are processed.
</p>

<p>
Note that when implementing the grid's custom data binding, the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebMvcDevExpressEditorsBindertopic">DevExpressEditorsBinder</helplink> must be used instead of the default model binder to correctly transfer values from DevExpress editors back to the corresponding data model fields. In this demo, the DevExpressEditorsBinder is assigned to the ModelBinders.Binders.DefaultBinder property within the Global.asax file, thus overriding the default model binder.
</p>
                ]]>
          </Description>
          <SourceFile>~/Models/GridViewCustomBindingModel.cs</SourceFile>
          <SourceFile>~/Views/DataBinding/SimpleCustomBindingPartial.cshtml</SourceFile>
          <SourceFile>~/Views/DataBinding/PerformanceTestPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="AdvancedCustomBinding" Title="Custom Data Binding (Advanced)" SeoTitle="Advanced Custom Data Binding" IsUpdated="true">
          <Description>
            <![CDATA[
<p>
DevExpress ASP.NET GridView supports custom data binding that allows you to perform all data operations, such as paging, sorting, filtering, grouping and summary calculation, completely by yourself. 
</p>

<p>
In this mode, you handle data operations in corresponding Action methods; the correspondence is defined by populating the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomBindingRouteValuesCollectiontopic">CustomBindingRouteValuesCollection</helplink>.
</p>

<p>
In each specified Action, the processed operation related state information, such as a column state (i.e., which column is sorted and in which direction) or a pager state (which page is selected), is passed automatically. The grid's current state (view model) can be obtained via the static <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_GetViewModeltopic">GridViewExtension.GetViewModel</helplink> method and can be updated with the processed operation state. Then, the required data should be provided for the grid view  model via a call to its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewModel_ProcessCustomBindingtopic">ProcessCustomBinding</helplink> method.
</p>

<p>
The <b>ProcessCustomBinding</b> method has several overloads. You can select a particular one depending on which data operations you need to handle. 
</p>

<p>
Generally, this method provides the following parameters representing typed method delegates:
</p>

<p>
getDataRowCountMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataRowCountHandlertopic">GridViewCustomBindingGetDataRowCountHandler</helplink> type<br/>
Provide implementation for this method to return the total number of data rows.
</p>
<p>
getDataMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataHandlertopic">GridViewCustomBindingGetDataHandler</helplink> type<br/>
Provide implementation for this method to return the required data rows to the grid.
</p>
<p>
getSummaryValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetSummaryValuesHandlertopic">GridViewCustomBindingGetSummaryValuesHandler</helplink> type<br/>
Provide implementation for this method to calculate and return values of summaries required within the grid.
</p>
<p>
getGroupingInfoMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetGroupingInfoHandlertopic">GridViewCustomBindingGetGroupingInfoHandler</helplink> type<br/>
Provide implementation for this method to return data rows for visible and expanded groups in the required order that depends on the applied grouping and sorting.
</p>
<p>
getUniqueHeaderFilterValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetUniqueHeaderFilterValuesHandlertopic">GridViewCustomBindingGetUniqueHeaderFilterValuesHandler</helplink> type<br/>
Provide implementation for this method to return unique values to be displayed in the header filter popup list invoked for a column.
</p>

<p>
The resulting grid state (view model) is returned as a model to a view that contains GridView. To bind GridView to this view model, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_BindToCustomDatatopic">BindToCustomData</helplink> method.
</p>

<p>
This demo shows an advanced implementation of custom data binding - all data operations are processed (in particular: sorting, paging, grouping, summary calculations and filtering including column header filter invocation).
</p>

<p>
Note that when implementing the grid's custom data binding, the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebMvcDevExpressEditorsBindertopic">DevExpressEditorsBinder</helplink> must be used instead of the default model binder to correctly transfer values from DevExpress editors back to the corresponding data model fields. In this demo, the DevExpressEditorsBinder is assigned to the ModelBinders.Binders.DefaultBinder property within the Global.asax file, thus overriding the default model binder.
</p>
                  ]]>
          </Description>
          <SourceFile>~/Models/GridViewCustomBindingModel.cs</SourceFile>
          <SourceFile>~/Views/DataBinding/AdvancedCustomBindingPartial.cshtml</SourceFile>
          <SourceFile>~/Views/DataBinding/PerformanceTestPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      
      <DemoGroup Key="GroupingSorting" Title="Sorting and Grouping">
        <Demo Key="Sorting" Title="Sorting" SeoTitle="Sorting Against Multiple Columns">
          <Description>
            <![CDATA[
                <p>
                The DevExpress MVC Grid View allows you to sort data against an unlimited number of columns. The column's current sort order is indicated by a sort glyph displayed at the column header's rightmost edge.
            </p><p>
                Click the column's header to sort data against a given data column or change the column's sort order. To sort data against multiple columns, click column headers while holding the SHIFT key.
            </p><p>
                Set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSorttopic">SettingsBehavior.AllowSort</helplink> option to true to enable end-user sorting.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/GroupingSorting/SortingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Grouping" Title="Grouping" SeoTitle="Outlook Style Data Grouping">
          <Description>
            <![CDATA[
            <p>
                The DevExpress ASP.NET MVC Grid View provides numerous data shaping options – including the ability to group records against an unlimited number of columns.
            </p><p>
                Grouping is allowed if the following properties are set to true:
            </p>
            <ul>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowGrouptopic">SettingsBehavior.AllowGroup</helplink></li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSorttopic">SettingsBehavior.AllowSort</helplink></li>
            </ul><p>
                End-users can group data by dragging column headers to the Group Panel. This panel's visibility is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowGroupPaneltopic">Settings.ShowGroupPanel</helplink> option.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/GroupingSorting/GroupingPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      
      <DemoGroup Key="Filtering" Title="Filtering">
        <Keywords>filtercontrol, filterbuilder, filters</Keywords>
        <Demo Key="Filtering" Title="Header Filter" SeoTitle="Excel Style Data Filtering">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC Grid View allows end-users to filter data with ease and simplicity. When filtering is enabled, grid column headers display filter buttons. Pressing the button invokes a filter dropdown, which lists unique values within the column. To execute a filter, end-users need only to select a value within the dropdown.
</p>

<p>
By default, filtering is disabled. To enable the MVC Grid's filter buttons, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowHeaderFilterButtontopic.aspx">Settings.ShowHeaderFilterButton</helplink> property to true.
</p>

<p>
Two list modes are available for filter dropdowns - List and CheckedList. A particular filter mode can be specified for individual columns via a column's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewDataColumnSettings_HeaderFilterModetopic.aspx">Settings.HeaderFilterMode</helplink> property. If this property is set to CheckedList for a column, the column's header filter dropdown contains a check box list, allowing end-users to select multiple items to be included in the filter criteria.
</p>

<p>
In addition to default filtering, the MVC Grid allows you to create custom filter values, define the desired filter, and display these values within the column's filter dropdown (via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_HeaderFilterFillItemstopic.aspx">HeaderFilterFillItems</helplink> method delegate). In this demo, custom filter values are displayed within the 'Total' and 'Quantity' column filter dropdowns.
</p>]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Filtering/FilteringPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="FilterRow" Title="Data Filter Row" SeoTitle="Filter Row">
          <Description>
            <![CDATA[
            <p>
                In addition to filters executed via the column header, the DevExpress MVC Grid View allows you to enable filtering via its “Filter Row” UI element. When active, the Filter Row allows end-users to filter grid data by entering text within its cells or by selecting values from its dropdown lists.
            </p><p>
                To display the Filter Row within the Grid View, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterRowtopic.aspx">Settings.ShowFilterRow</helplink> property to <b>true</b>.
            </p><p>
                In this demo, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterRowMenutopic.aspx">Settings.ShowFilterRowMenu</helplink> property is also enabled so that end-users can specify filter conditions via a menu. This menu can be invoked by clicking the Filter Row button displayed within Filter Row cells.
            </p><p>
                Once a filter has been applied, it can be cleared by pressing the Clear button within the Filter Row. Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewCommandColumnButton_Visibletopic.aspx">ClearFilterButton.Visible</helplink> property to activate this feature.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Filtering/FilterRowPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="FilterBuilder" Title="Filter Builder" SeoTitle="Built-in Filter Builder">
          <Description>
            <![CDATA[
                <p>
        The DevExpress MVC Grid View implements the built-in Filter Builder. You can use it to allow end-users to visually build complex filter criteria with an unlimited number of filter conditions, combined by logical operators. 
        </p>

        <p>
        End-users can open the Filter Builder popup window by clicking the image or filter expression link within a specific Filter Bar that can be displayed at the grid bottom. By default, the Filter Bar isn't displayed. You can use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterBartopic.aspx">Settings.ShowFilterBar</helplink> property to control its display mode (Hidden, Visible, Auto).
        </p>

        <p>
        The Filter Bar displays the following elements:
        </p>

        <ul>
            <li><b>Filter Check Box</b> - Enables or temporarily disables the current filter.</li>
            <li><b>Filter Image</b> - Click this image to invoke the Filter Builder.</li>
            <li><b>Filter Expression Link</b> - A string representation of the currently applied filter criteria. A click on this link invokes the Filter Builder.</li>
            <li><b>Clear Command</b> - Clears the current filter.</li>
        </ul>

        <p>
        When the Filter Builder popup window is invoked, end-users are allowed to create and customize filter criteria as follows.
        </p>

        <ul>
            <li>
            <b>Add/Remove Conditions</b><br/>
            To create and customize filter criteria, use the Add and Remove buttons.
            </li>

            <li>
            <b>Change a Column in a Filter Condition</b><br/>
            To change a condition's column, invoke the column list and choose the required column.
            </li>

            <li>
            <b>Change an Operator in a Filter Condition</b><br/>
            To change a condition's operator, invoke the operator list and choose the required operator.
            </li>

            <li>
            <b>Edit a Condition's Value</b><br/>
            To edit a condition's value, click the operand value and type text. To discard changes to the value and close the active edit box, press ESC.
            </li>
        </ul>
              ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Filtering/FilterBuilderPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Summary" Title="Data Summaries">
        <Keywords>amount, total</Keywords>

        <Demo Key="Summary" Title="Data Summaries Via Aggregate Functions" SeoTitle="Automatic Summary Calculation">
          <Description>
            <![CDATA[
            <p>
                Total summaries are aggregate function values calculated across all rows within the DevExpress MVC Grid View and displayed within its footer. The footer is visible if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFootertopic.aspx">Settings.ShowFooter</helplink> property is set to true.
            </p><p>
                The Grid View stores total summary items within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_TotalSummarytopic.aspx">TotalSummary</helplink> collection. Individual items are represented by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxSummaryItemtopic">ASPxSummaryItem</helplink> objects.  
            </p><p>
                A group summary represents the value of an aggregate function calculated across all data rows within a group. Group summaries are displayed within group rows. The Grid View stores its group summaries within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_GroupSummarytopic.aspx">GroupSummary</helplink> collection. Individual items are represented by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxSummaryItemtopic">ASPxSummaryItem</helplink> objects.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Summary/SummaryPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="GroupSortBySummary" Title="Sort By Summaries" IsNew="true">
          <Description>
              <![CDATA[
                <p>The DevExpress ASP.NET MVC GridView provides a rich API to sort data groups by their summary values.</p>
                <p>In this demo, the GridView extension is grouped by country. Use the ‘Sort by summary mode’ combo box to select the required sort order. For instance, select <b>Descending</b> to sort grouped rows so that countries with the highest sales appear at the top of the view.</p>
                <p>Group rows are sorted by summary value based on the information provided by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGroupSummarySortInfotopic">ASPxGroupSummarySortInfo</helplink> objects. Properties introduced by these objects represent the sort order, summary item used to calculate summary values, etc. These properties are read-only and initialized by the constructor.</p> 
                <p>To sort group rows by summary value, create a new <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGroupSummarySortInfotopic">ASPxGroupSummarySortInfo</helplink> object and add it to the GridView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_GroupSummarySortInfotopic">GroupSummarySortInfo</helplink> collection using the <b>GroupSummarySortInfoCollection.Add</b> method. After the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGroupSummarySortInfotopic">ASPxGroupSummarySortInfo</helplink> object has been added to the collection, group rows are automatically sorted by their summary values.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Summary/GroupSortBySummaryPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Editing" Title="Editing">
        <Keywords>crud, dataedit</Keywords>
        <Demo Key="EditModes" Title="Edit Modes" SeoTitle="Edit Modes" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/EditModes.png" IsUpdated="true">
          <Keywords>crud, dataedit, validation, unobtrusive validation, edit form, client validation</Keywords>
          <Description>
            <![CDATA[
          <p>
          This demo illustrates the Grid View's built-in data editing functionality. 
          </p>
          <p>
          To enable data editing operations, the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_KeyFieldNametopic">KeyFieldName</helplink> property must be specified. For each allowed data operation (such as inserting, updating or deleting), provide an associated controller action that will apply data changes to Model and return the grid's partial view. You can reference these controller actions by their names using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_AddNewRowRouteValuestopic.aspx">SettingsEditing.AddNewRowRouteValues</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_UpdateRowRouteValuestopic.aspx">SettingsEditing.UpdateRowRouteValues</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_DeleteRowRouteValuestopic.aspx">SettingsEditing.DeleteRowRouteValues</helplink> properties. Note that in actions that handle update and insert operations, you can obtain the edited object using our specific DevExpressEditorsBinder model binder. In the actions handling delete operations, you can get the key value of the deleted row.
          </p>
          <p>
          To allow end-users to manipulate grid data, add a command column to the grid's column collection and specify which commands (New, Edit, Delete, Update, Cancel) can be used by end-users. To switch a grid row to edit mode, end-users should be allowed to click the Edit command.
          </p>
          <p>
          The following list highlights built-in edit modes available for the Grid View, from the simplest to the most sophisticated (use the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewEditingSettings_Modetopic.aspx">SettingsEditing.Mode</helplink> property to specify edit mode):
          </p>
          <ul>
          <li>
          <p><b>In-Cell Editing</b></p>
          <p>When a row is switched to edit mode, its cells display appropriate editors.</p>
          </li>
          <li>
          <p><b>Edit Form</b></p>
          <p>When a row is switched to edit mode, an edit form appears under or instead of the edited row.</p>
          <p>Edit Form displays label-editor pairs that correspond to data columns, and the Update/Cancel commands that allow end-users to save or discard the changes made. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewDataColumn_EditFormSettingstopic">EditFormSettings</helplink> property of data columns contains different settings to arrange label-editor pairs. This provides you with a flexible data editor arrangement mechanism. The default layout of the Edit Form is generated automatically.</p>
          </li>
          <li>
          <p><b>Popup Edit Form</b></p>
          <p>When a row is switched to edit mode, Edit Form is displayed as a popup window, which can be dragged and used in modal mode, if required.</p>
          </li>
          </ul>
          <p>The GridView validates user-input on the client-side based on the <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument14707">data annotation attributes</helplink> of your Model. This approach is also called <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument12060">unobtrusive client validation</helplink>. To enable the unobtrusive validation, the partial View with the GridView extension is placed inside the HTML &lt;form&gt; element (rendered via the <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.118).aspx">Html.BeginForm</a> helper). The Partial View with the GridView extension contains two helpers that enable the unobtrusive client validation: <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableclientvalidation(v=vs.118).aspx">Html.EnableClientValidation</a> and <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableunobtrusivejavascript(v=vs.118).aspx">Html.EnableUnobtrusiveJavaScript</a>.</p>
          <p>An error is displayed next to the individual form editors. However, an additional error message can be displayed below the edit form using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_SetEditErrorTexttopic.aspx">SetEditErrorText</helplink> method.</p>
            ]]>
          </Description>
          <HighlightedDescription>The DevExpress Grid View Extension for ASP.NET MVC provides your end-users with rich data editing capabilities. This demo illustrates the various edit modes available, including inline editing, editing via an edit form, editing via an edit form with the data row displayed, and editing via a popup edit form.</HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Editing/EditModesPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="EditFormTemplate" Title="Edit Form Template" SeoTitle="Customizable Edit Form">
          <Keywords>crud, dataedit, template</Keywords>
          <Description>
            <![CDATA[
                <p>
                Grid View allows you to provide a custom edit mode layout by creating an appropriate template for particular edited row cells or an entire Edit Form.
                </p>

                <p>
                This demo describes how a template for the grid's Edit Form can be defined using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetEditFormTemplateContenttopic.aspx">SetEditFormTemplateContent</helplink> method. Within a template, custom label-editor pairs and Update/Cancel buttons are explicitly created using helpers from DevExpress Data Editors Extensions (such as the Label, TextBox, ComboBox, SpinEdit, Button, etc.).
                </p>

                <p>
                Editors used within a template are customized in the following simple manner: they are bound to corresponding model data fields (via the <b>Bind</b> method), are named according to these fields (via the <b>Name</b> property), and their ability to automatically visualize model errors when validation fails is enabled (via the <b>ShowModelErrors</b> property). 
                </p>

                <p>
                Editors bind to values of the model's currently edited data object. Note that this object is passed into a template either automatically (as a template container's <b>DataItem</b> property - when a grid row is just switched to edit mode) or manually (as a ViewData data object passed from a controller - when data modifications cannot be accomplished due to input validation fail and it is required to return the edited data object back to the view's Edit Form without losing user changes). To correctly transfer values from DevExpress editors back to corresponding data model fields, the DevExpressEditorsBinder model binder is used within controller actions.
                </p>

                <p>
                Buttons that represent the Update and Cancel links are customized so that their <b>Text</b> properties are defined ("Update" and "Cancel" texts) and the <b>Click</b> client events are handled to call the grid's respective client methods - <b>UpdateEdit</b> and <b>CancelEdit</b>.
                </p>            
                ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Editing/EditFormTemplatePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ExternalEditForm" Title="External Edit Form" SeoTitle="Data Editing">
          <Description>
            <![CDATA[
              <p>
                  This demo illustrates data editing options available to you when using the DevExpress MVC Grid View.
              </p><p>
                  The MVC Grid View can include a column with links that execute Delete, Insert and Edit operations. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcMVCxGridViewColumn_SetDataItemTemplateContenttopic">SetDataItemTemplateContent</helplink> method is used to assign a specific template to the column. Editing data is performed within a specially designed page. This page contains the appropriate DevExpress editors for each Grid View column. Note that this demo also illustrates how model validation can be used together with DevExpress MVC Editors. The data model is decorated with custom validation attributes and both server-side and client-side validation code is added - allowing error messages to be automatically displayed in the browser near editors when client-side validation fails.
              </p><p>
                  The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_ClientLayouttopic">ClientLayout</helplink> method delegate is used to maintain the Grid View's state as a user navigates between the grid and the data edit page.
              </p>]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Editing/ExternalEditFormPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Editing/EditingForm.cshtml</SourceFile>
        </Demo>
        <Demo Key="BatchEditing" Title="Batch Editing" SeoTitle="Batch Editing and Update" IsUpdated="true">
          <Keywords>batch edit, dataedit, crud, update</Keywords>
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC Grid View extension provides the ability to modify a batch of grid data on the client side and send it to the server in one request.</p>
                <p>To enable the batch editing functionality set the <b>Mode</b> property to <b>Batch</b>. In this mode the grid data contained in a page can be edited using in-line editors. The modified cells are colored in green. All changes are maintained on the client side until the <b>Save changes</b> link is clicked. You can cancel all changes by clicking the <b>Cancel changes</b> link.</p> 
                <p>If a grid contains modified data, it displays a confirm message before a grid callback is performed. </p>
                <p>In this demo use the Edit type combo box to specify the control element used to edit the data: cell or row. The <b>Start Edit Action</b> combo box allows you to specify the action (click or double click) that should be used to begin editing grid data.</p>
                <p>The GridView validates user-input on the client-side based on the <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument14707">data annotation attributes</helplink> of your Model. This approach is also called <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument12060">unobtrusive client validation</helplink>. To enable the unobtrusive validation, the partial View with the GridView extension is placed inside the HTML &lt;form&gt; element (rendered via the <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.118).aspx">Html.BeginForm</a> helper). The Partial View with the GridView extension contains two helpers that enable the unobtrusive client validation: <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableclientvalidation(v=vs.118).aspx">Html.EnableClientValidation</a> and <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableunobtrusivejavascript(v=vs.118).aspx">Html.EnableUnobtrusiveJavaScript</a>. An error is displayed next to the individual data editors. </p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Editing/BatchEditingPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Editing/BatchEditing.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="MasterDetail" Title="Master-Detail">
        <Demo Key="MasterDetail" Title="Master-Detail" SeoTitle="Master-Detail Relationship" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/MasterDetail.png" HighlightedTitle="Advanced Master-Detail Grid">
          <Keywords>master-detail, master, detail</Keywords>
          <Description>
            <![CDATA[
                <p>
                    The DevExpress ASP.NET MVC Grid View supports master-detail data presentation of any complexity.
                </p>

                <p>
                    This demo shows how to create a simple master-detail relationship between two tables. All you have to do is to:
                </p>

                <ul>
                    <li>
                        Use two Grid View extensions.
                    </li>
                    <li>
                        Bind the first grid (master grid) to the master data source and enable the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_ShowDetailRowtopic.aspx">SettingsDetail.ShowDetailRow</helplink> option.
                    </li>
                    <li>
                        Place the second grid (detail grid) into the master grid's detail row template created via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetDetailRowTemplateContenttopic.aspx>SetDetailRowTemplateContent</helplink> method.
                    </li>
                    <li>
                        Assign a unique (dynamically generated) name to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink> property of the detail grid and set its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewDetailSettings_MasterGridNametopic.aspx">SettingsDetail.MasterGridName</helplink> property to the master grid's name.
                    </li>
                    <li>
                        Bind the detail grid to the detail data source whose data is retrieved in a controller action based upon the corresponding master row ID passed via a ViewData parameter.
                    </li>
                </ul>
                <p>
                    By default, end-users can expand several master rows simultaneously. 
                    This behavior is controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_AllowOnlyOneMasterRowExpandedtopic.aspx">SettingsDetail.AllowOnlyOneMasterRowExpanded</helplink> option. 
                </p>            
              ]]>
          </Description>
          <HighlightedDescription>The DevExpress GridView Extension for ASP.NET MVC supports master-detail data presentation of any complexity. In this demo, end-users can switch between the sibling detail grids.</HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/MasterDetail/MasterDetailDetailPartial.cshtml</SourceFile>
          <SourceFile>~/Views/MasterDetail/MasterDetailMasterPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Templates" Title="Templates">
        <Keywords>customization, layout</Keywords>
        <Demo Key="Templates" Title="Templates" SeoTitle="Templates">
          <Keywords>template, customization, layout</Keywords>
          <Description>
            <![CDATA[
            <p>
                This demo describes ways to use Templates within the DevExpress Grid View – in particular, this sample uses Templates for the pager bar and individual data rows.
            </p><p>
                Templates are defined by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetPagerBarTemplateContenttopic.aspx">SetPagerBarTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetDataRowTemplateContenttopic.aspx">SetDataRowTemplateContent</helplink> methods, respectively. These methods contain a parameter that represents specific template container objects. Template children are represented by combinations of HTML elements and DevExpress Editors.
            </p>]]>
          </Description>
          <SeeAlso Url="https://documentation.devexpress.com/#AspNet/CustomDocument14721" Title="Online Documentation - Templates" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Templates/TemplatesPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Exporting" Title="Data Export">
        <Demo Key="Export" Title="Exporting Data" SeoTitle="Data Export to PDF, XLS, RTF">
          <Keywords>export, pdf, excel, xls, rtf, csv</Keywords>
          <Description>
            <![CDATA[
            <p>
                The MVC Grid View allows you to export its data with ease. Using specific static methods provided at the GridViewExtension class level, the GridView's data can be exported to a file or stream in the following formats:
            </p><ul><li>
                    PDF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WritePdftopic.aspx">WritePdf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToPdftopic.aspx">ExportToPdf</helplink>)
                </li><li>
                    XLS (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WriteXlstopic.aspx">WriteXls</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToXlstopic.aspx">ExportToXls</helplink>)
                </li><li>
                    XLSX (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WriteXlsxtopic.aspx">WriteXlsx</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToXlsxtopic.aspx">ExportToXlsx</helplink>)
                </li><li>
                    RTF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WriteRtftopic.aspx">WriteRtf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToRtftopic.aspx">ExportToRtf</helplink>)
                </li></ul><p>
                This demo illustrates how data within the Grid View can be exported to different formats - based on the Grid View's current settings (defined in a single location - within the Controller). These settings are passed to a View containing the grid’s markup - 'View(partial)' and they are also used by export methods.
            </p>]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument17142" Title="Online Documentation - Exporting GridView Records" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Exporting/ExportPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ExportDetails" Title="Export Master-Detail Records" IsNew="true">
          <Keywords>master-detail, export, pdf, excel, xls, rtf, csv</Keywords>
          <Description>
              <![CDATA[
              <p>The DevExpress ASP.NET MVC GridView allows both master and detail data to be exported with its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_ExportModetopic">SettingsDetail.ExportMode</helplink> property.</p> 
              <p>In this demo, use the <b>Details Export Mode</b> combo box to select the desired data export mode.</p>
              <ul>
                  <li>None – only master rows will be exported.</li>
                  <li>Expanded – only master rows and expanded detail rows will be expanded.</li>
                  <li>All – all master and detail rows will be exported.</li>
              </ul>
              <p>The GridView extension provides the ability to export binary images. The settings of exported images are controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsImageEditPropertiesBase_ExportImageSettingstopic">ExportImageSettings</helplink> property within the BinaryImage column.</p>
              ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument17011" Title="Online Documentation - Exporting Master-Detail Records" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Exporting/ExportDetailsMasterPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Exporting/ExportDetailsDetailPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Columns" Title="Grid Columns">
        <Demo Key="CustomizationWindow" Title="Customization Window" SeoTitle="Outlook Style Field Chooser">
          <Description>
            <![CDATA[
                <p>
                    The <b>customization window</b> displays hidden column headers.
                </p>
                <ul>
                    <li>
                        To hide a grid column, drag its header to the customization window.
                    </li>
                    <li>
                        To make a column visible, drag its header from the customization window back to the Grid View's header panel.
                    </li>
                </ul>
                <p>
                    Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewPopupControlSettings_CustomizationWindowtopic.aspx">SettingsPopup.CustomizationWindow</helplink> property to specify the customization window's availability and position.
                </p>
                <p>
                    The following self-explanatory client-side methods allow you to manage the customization window:
                </p>
                <ul>
                    <li>
                        ShowCustomizationWindow()
                    </li>
                    <li>
                        HideCustomizationWindow()
                    </li>
                    <li>
                        IsCustomizationWindowVisible()
                    </li>
                </ul>            
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16149" Title="Online Documentation - GridView Columns" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Columns/CustomizationWindowPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ContextMenu" Title="Context Menu" SeoTitle="Context Menu" IsNew="true">
          <Keywords>context menu</Keywords>
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC GridView context menu is a popup menu displayed when an end-user right-clicks a grid element. The GridView extension provides different context menu types for the following elements: row, column header, footer and group panel. You can specify the visibility of all context menu types using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewContextMenuSettings_Enabledtopic">Enabled</helplink> property. To control the menu visibility for a particular element, use the following properties.</p>
                <ul>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewContextMenuSettings_EnableRowMenutopic">EnableRowMenu</helplink> – controls the visibility of a row context menu.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewContextMenuSettings_EnableColumnMenutopic">EnableColumnMenu</helplink> – controls the visibility of a column header context menu.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewContextMenuSettings_EnableFooterMenutopic">EnableFooterMenu</helplink> – controls the visibility of a footer context menu.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewContextMenuSettings_EnableGroupPanelMenutopic">EnableGroupPanelMenu</helplink> – controls the visibility of a group panel context menu.</li>
                </ul>
                <p>By default, GridView provides a set of context menu items for every menu type. You can customize the default items or add your own custom items. At runtime, you can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_FillContextMenuItemstopic">FillContextMenuItems</helplink> property to process the customization of default menu items and creation of custom items.</p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Columns/ContextMenuPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Bands" Title="Multi-Row Headers (Bands)" SeoTitle="Multi-Row Headers (Bands)">
          <Keywords>multi-column, multi-column headers, multu-column bands, bands</Keywords>
          <Description>
            <![CDATA[
                  <p>
                  The GridView's multi-row headers feature allows you to organize grid columns in logical groups (bands). This demo illustrates basic band functionality.
                  </p>
                  <p>
                  A band is visually represented by a header displayed above headers of the columns it combines. Each band is realized as a specific column type - <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebMvcMVCxGridViewBandColumntopic">MVCxGridViewBandColumn</helplink>. A band column is a different kind of column - it is designed not to display data values directly, but to contain other (child) columns within its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewBandColumn_Columnstopic.aspx">Columns</helplink> collection. Therefore, it is possible to have a hierarchy of nested bands. Moreover, you can place a data column and a band column at the same hierarchy level. To add a data column use a column collection's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewColumnCollection_Addtopic.aspx">Add</helplink> method to add a band column - the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewColumnCollection_AddBandtopic.aspx">AddBand</helplink> method.
                  </p>
                  <p>
                  Bands are not only used for display purposes. They can be dragged by end-users to re-order columns. This is extremely useful if you need to provide a quick way to re-arrange columns while preserving their logical grouping. Note that columns (and bands) are only allowed to move within their parent bands - you cannot move a child column from one parent band to another. This prevents end-users from breaking column grouping logic.
                  </p>
                  <p>
                  Resizing and column freezing features also work fine with bands. The only note is that column freezing (controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewColumn_FixedStyletopic.aspx">FixedStyle</helplink> property) can be applied only to columns and bands located at the root hierarchy level (i.e. within the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_Columnstopic.aspx">Columns</helplink> collection).
                  </p>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16143" Title="Online Documentation - Band Columns" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Columns/BandsPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Rows" Title="Grid Rows">
        <Demo Key="FocusedRow" Title="Focused Row" SeoTitle="Focused Row">
          <Description>
            <![CDATA[
            <p>
                This demo dynamically displays detailed information for the selected row outside the MVC Grid View. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> client event is handled via the <b>OnGridFocusedRowChanged()</b> JavaScript function. This function queries the server by using the Grid View's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetRowValuestopic.aspx">GetRowValues</helplink> client method, to return the current employee's ID and Notes. The returned array is passed to the <b>OnGetRowValues()</b> JavaScript function, that assigns the obtained values to corresponding controls (DevExpress Image and Memo Editors).
            </p><p>
                To enable the capabilities of Focused Row, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowFocusedRowtopic.aspx">SettingsBehavior.AllowFocusedRow</helplink> property to true. Appearance of the Focused Row can be specified using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewStyles_FocusedRowtopic">Styles.FocusedRow</helplink> property.
            </p><p>
                End-users can move row focus by clicking the desired row. To respond to a change in row selection, handle the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> client event. To identify the currently focused row, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetFocusedRowIndextopic.aspx">GetFocusedRowIndex</helplink> client method.
            </p>]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16275" Title="Online Documentation - GridView Rows" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Rows/FocusedRowPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Preview" Title="Preview Row" SeoTitle="Outlook Style Row Preview">
          <Description>
            <![CDATA[
            <p>
                The DevExpress MVC Grid View gives you the ability to display detail information for a given row within its Preview Row region. These are non-editable rows that allow large memo fields or custom data to be displayed across all the columns within the Grid View.
            </p><p>
                Preview Rows are displayed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowPreviewtopic.aspx">Settings.ShowPreview</helplink> option is set to true. By default, Preview Rows are empty. Set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_PreviewFieldNametopic.aspx">PreviewFieldName</helplink> property to the required field in the data source to bind the preview rows with data. Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewStyles_PreviewRowtopic.aspx">Styles.PreviewRow</helplink> property to access style settings used to paint preview rows.
            </p><p>
                To provide a template for rendering preview rows, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetPreviewRowTemplateContenttopic.aspx">SetPreviewTemplateContent</helplink> method.
            </p>]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16228" Title="Online Documentation - GridView Preview Row" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Rows/PreviewPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Selection" Title="Row Selection">
        <Demo Key="RowSelection" Title="Row Selection" SeoTitle="Row Selection">
          <Description>
            <![CDATA[
            <p>
                This demo displays contact names selected in the Grid View within the 'Selected values' list box.
            </p><p>
                To allow row selection, add a command column to the Grid View and set its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_ShowSelectCheckboxtopic.aspx">ShowSelectCheckBox</helplink> property to <b>true</b>. The column will display check boxes within its cells. End-users can check or uncheck these check boxes to select or de-select corresponding data rows.
            </p><p>
                The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_SelectionChangedtopic">SelectionChanged</helplink> client-side event is handled to display selected contacts within the list box and the number of selected contacts below it. Contact names are obtained using the Grid View's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedFieldValuestopic">GetSelectedFieldValues</helplink> client method. The number of selected rows is returned by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedRowCounttopic.aspx">GetSelectedRowCount</helplink> client method.
            </p>]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16898" Title="Online Documentation - Selection" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Selection/RowSelectionPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="AdvancedSelection" Title="Select All Rows" SeoTitle="Select All Rows" IsNew="true">
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC Grid View extension provides end-users with the capability to select all grid rows by using the <b>Select All</b> check box, which can be displayed in a grid header. The check box visibility and selection mode is defined by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_SelectAllCheckboxModetopic">SelectAllCheckboxMode</helplink> property. This property can be set to the following values.</p> 
                <ul>
                <li><b>None</b> – the <b>Select All</b> check box is not displayed.</li>
                <li><b>Page</b> – the <b>Select All</b> check box selects and deselects all rows on the current grid page.</li>
                <li><b>AllPages</b> – the <b>Select All</b> check box selects and deselects all grid rows (on all grid pages).</li>
                </ul>                
                <p>In this demo the title panel is templated. When the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_SelectAllCheckboxModetopic">SelectAllCheckboxMode</helplink> property is set to <b>Page</b>, hyperlinks within the template allow end-users to select and deselect all grid rows. For this purpose, the client-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_SelectRowstopic">SelectRows</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_UnselectRowstopic">UnselectRows</helplink> methods are used.</p>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16898" Title="Online Documentation - Selection" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Selection/AdvancedSelectionPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup  Key="PagingAndScrolling" Title="Data Paging and Scrolling">
        <Demo Key="Scrolling" Title="Scrolling" SeoTitle="Scrolling">
          <Description>
            <![CDATA[
<p>
The ASP.NET MVC Grid View offers both vertical and horizontal scrolling. By default, the grid's height is determined by the number of rows displayed within a page and is controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_PageSizetopic.aspx">SettingsPager.PageSize</helplink> property. To reduce the grid's height, you can display a vertical scrollbar by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarModetopic.aspx">Settings.VerticalScrollBarMode</helplink> property, and specify the height of the scrollable area (in pixels) via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollableHeighttopic.aspx">Settings.VerticalScrollableHeight</helplink> property. 
</p>
<p>
The grid's width is dependent upon the number of visible columns by default. If there are too many columns within the grid, you can enable horizontal scrolling via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_HorizontalScrollBarModetopic.aspx">Settings. HorizontalScrollBarMode</helplink> property and define the desired scrollable area width by using the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Widthtopic.aspx">Width</helplink> property. </p>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16903" Title="Online Documentation - Vertical Scrolling" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16905" Title="Online Documentation - Horizontal Scrolling" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/PagingAndScrolling/ScrollingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Paging" Title="Paging" SeoTitle="Paging">
          <Description>
            <![CDATA[
            <p>
            The GridView automatically splits large content across multiple pages and provides a built-in pager that enables end-users to navigate through data.
            </p>
            <p>
            The pager can be customized using settings of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SettingsPagertopic.aspx">SettingsPager</helplink> property. This demo demonstrates the following settings:
            </p>
            <ul>
              <li>The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_Positiontopic.aspx">Position</helplink> setting controls the pager's position within a grid. The available options are: at the element's top, bottom, or both.</li>
              <li>The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPagerButtonProperties_Visibletopic.aspx">PageSizeItemSettings.Visible</helplink> setting controls page size item visibility. This element is used to specify a page size, i.e. the number of items placed on a page.</li>
              <li>The <b>FirstPageButton.Visible</b> and <b>LastPageButton.Visible</b> settings control the first and last button's visibility. The buttons allows end-users to navigate to the first or the last page, respectively.</li>
            </ul>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16900" Title="Online Documentation - Data Paging" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/PagingAndScrolling/PagingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="SEOFriendlyPaging" Title="SEO Friendly Paging" SeoTitle="SEO Friendly Paging">
          <Description>
            <![CDATA[
                      <p>A known problem with grid controls is that search engines simply ignore pagers. When indexing a site, they only use the information contained within the first page. The reason for this is that pager's links are usually not represented as hyperlinks to other pages. Instead, they respond to click events to raise data update callbacks. The GridView extension allows you to make a SEO-friendly pager. Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_SEOFriendlytopic">SettingsPager.SEOFriendly</helplink> property for this purpose.</p>

                      <p>If this property is set to SEOFriendlyMode.CrawlerOnly, the GridView renders hyperlinks in the pager when a web-crawler is detected. For other visitors, standard pager links are generated. So, search engines can index the entire contents of the grid and site visitors experience the same callback functionality.</p>

                      <p>If the property is set to SEOFriendlyMode.Enabled or SEOFriendlyMode.Disabled, automatic web crawler detection is disabled. The pager renders either SEO-friendly or standard links, respectively.</p>
                  ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16901" Title="Online Documentation - SEO Paging" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/PagingAndScrolling/SEOFriendlyPagingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="EndlessPaging" Title="Endless Paging" SeoTitle="Endless Paging" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/EndlessPaging.png" HighlightedTitle="Endless Paging">
          <Description>
            <![CDATA[
                      <p>The MVC <b>GridView</b> extension supports an endless paging mode that allows for the loading of grid rows on demand. To enable this functionality, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_Modetopic">SettingsPager.Mode</helplink> property to <b>EndlessPaging</b>, and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarModetopic">Settings.VerticalScrollBarMode</helplink> property to <b>Visible</b> or <b>Auto</b>. In this mode, the grid loads more rows automatically when the end-user scrolls down to the bottom of extension content.</p>
                      <p>The loading panel is displayed while data is loading.</p>
                      ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument15535" Title="Online Documentation - Endless Paging" />
          <HighlightedDescription>The Endless Paging mode in the DevExpress Grid View allows grid rows to load on demand based on user actions. In this demo, rows are loaded when an end-user scrolls to the bottom of the grid.</HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/PagingAndScrolling/EndlessPagingPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="GridLookup" Title="Advanced Lookup" SeoTitle="ASP.NET MVC Grid Lookup Extension">
        <Demo Key="MultiSelect" Title="Multiple Record Selection" HighlightedIndex="4" HighlightedImageUrl="~/Content/DemoIcons/Lookup.png" HighlightedTitle="Advanced Lookup - Multiple Record Selection">
          <Keywords>autocomplete, selection</Keywords>
          <Description>
          <![CDATA[
              <p>The GridLookup editor combines the functionality of the DevExpress DropDownEdit and GridView extensions for ASP.NET MVC to allow end-users to easily select records from a drop-down grid containing lookup items. The GridView extension is seamlessly embedded into the editor's drop-down window, providing the editor with a powerful customizable data-processing and data-representation functionality. The GridLookup emulates a combo box that allows end-users to select multiple items within its drop-down list in the demo.</p>
              <p>One of the major data-processing features adopted from the GridView is the capability to allow end-users to select multiple list items within the drop-down grid. The selection behavior is controlled by the editor's <b>SelectionMode</b> property, which can be set to <b>Single</b> (only one item can be selected within the editor) or <b>Multiple</b> (multiple items can be selected within the editor). This demo illustrates how multi-item selection can be implemented easily within GridLookup using the functionality of the built-in grid.</p>
              <p>In this demo, the <b>SelectionMode</b> property is set to <b>Multiple</b>. End-users can select items by clicking check boxes within the drop-down grid, or by entering tag names separated with a comma into the editor's edit box.</p>
              <p>To display check boxes within a drop-down grid, a specific command column is created and its <b>ShowSelectCheckbox</b> property is set to true. In addition, end-users are allowed to filter items within the drop-down grid. This feature is enabled by setting the editor's <b>GridSettings.ShowFilterRow</b> property to true.</p>
              <p>Tag names can be entered into the editor’s edit box directly. This functionality is controlled by the <b>TextFormatString</b> property, which defines the column ("TagName") whose values should be entered and represented within the edit box. By default, a semicolon character (;) is used as the value separator. List items (grid rows) that correspond to the tag names entered are automatically selected after the value is submitted (for instance, by pressing the ENTER key).</p>
              <p>When used together, all of these features provide end-users with easy-to-use features for searching and selecting the required data.</p>
          ]]>
          </Description>
          <HighlightedDescription>The DevExpress GridLookup editor for ASP.NET MVC allows end-users to easily select values from a drop-down grid. It is similar to a combo box, but allows users to select multiple items in the drop-down.</HighlightedDescription>
          <SourceFile>~/Views/GridLookup/MultiSelectPartial.cshtml</SourceFile>
          <SeeAlso Url="http://www.youtube.com/watch?v=O-NhrCT5aQo" Title="DevExpress ASP.NET MVC: The GridLookup Extension" />
        </Demo>
        <Demo Key="AdvancedLookup" Title="Item Template">
          <Keywords>autocomplete</Keywords>
          <Description>
          <![CDATA[
             <p>The DevExpress GridLookup extension for ASP.NET MVC includes many of the powerful data representation features of the GridView, including support for templates. Templates can be defined for different elements of the built-in grid such as data rows and data cells.</p>
             <p>This demo illustrates how the layout of the editor's list items can be modified by creating a template for the drop-down grid data rows via the <b>GridViewProperties.SetDataRowTemplateContent</b> property. Note that the incremental filtering functionality (enabled via the <b>IncrementalFilteringMode</b> property) works correctly when list item templating is used. In this demo, incremental filtering is performed over the values of the first two data columns defined within the editor's <b>Columns</b> collection - 'First Name' and 'Last Name'. The <b>TextFormatString</b> property using indexed placeholders ({0} and {1}) that correspond to column indexes within the <b>Columns</b> collection. Thus, the <b>TextFormatString</b> property defines the format for displaying the value of the selected item within the edit box. The indexed placeholders ({0} and {1}) correspond to column indexes within the <b>Columns</b> collection.</p>
             ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/GridLookup/AdvancedLookupPartial.cshtml</SourceFile>
          <SourceFile>~/Views/GridLookup/AdvancedLookupRowTemplatePartial.cshtml</SourceFile>
          <SourceFile>~/Content/GridView/CSS/AdvancedLookup.css</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Accessibility" Title="Accessibility">
        <Keywords>wcga, 508, section</Keywords>
        <Demo Key="Compliance" Title="Section 508 Compliance">
          <Description>
            <![CDATA[
                <p>DevExpress ASP.NET MVC Extensions can help you create web pages that conform to accessibility guidelines. Although DevExpress MVC extensions may not render markup that directly results in pages that meet accessibility standards by default, they expose API (properties, methods and events) that can be used to make the pages accessible. In addition, most DevExpress MVC extensions implement the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_AccessibilityComplianttopic">AccessibilityCompliant</helplink> property, which allows more accessible markup to be generated for extensions. </p>
                <p>This demo illustrates how to make the GridView extension more accessible for end-users. For this purpose, the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_Captiontopic">Caption</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_SummaryTexttopic">SummaryText</helplink> properties are defined explicitly, and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_AccessibilityComplianttopic">AccessibilityCompliant</helplink> property (whose state is controlled by a check box) is enabled by default.</p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Accessibility/CompliancePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="KeyboardSupport" Title="Keyboard Support" SeoTitle="Keyboard Navigation">
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC GridView extension includes built-in keyboard support, allowing you to perform navigation operations using a keyboard instead of a pointing device. For example, you can access the grid within a web page, move focus through grid rows, select grid rows, and expand/collapse rows. By enabling keyboard support for GridView, you can create web pages that conform to accessibility guidelines.</p>
                <p>To enable keyboard navigation, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_KeyboardSupporttopic">KeyboardSupport</helplink> property of the grid to <b>true</b>. This will activate the following grid features:</p>
                <ul>
                    <li>
                        <b>Access Key</b> - GridView can be accessed (focused) with a user-defined keyboard shortcut. This shortcut is created by combining the preset <b>CTRL</b> + <b>SHIFT</b> combination with a single character string specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcSettingsBase_AccessKeytopic">AccessKey</helplink> property. For example, setting the access key of a grid control to the string "G" indicates that an end-user can navigate to the grid by pressing <b>CTRL</b> + <b>SHIFT</b> + <b>G</b>. 
                    </li>
                    <li>
                        <b>Focused Row</b> - The Focused Row feature is automatically activated, regardless of the feature’s property setting (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowFocusedRowtopic">SettingsBehavior.AllowFocusedRow</helplink>). Focus can be moved between rows using the <b>UP</b> and <b>DOWN ARROW</b> keys. The <b>LEFT ARROW</b> and <b>RIGHT ARROW</b> keys can also be used to move row focus, but these keys initially try to collapse or expand a row. In this case, focus is only moved when it is not possible to collapse or expand a row. When focus is on the first row in a page and you press the <b>UP ARROW</b> or <b>LEFT ARROW</b> key, the previous page is displayed. When focus is on the last row in a page and you press the <b>DOWN ARROW</b> or <b>RIGHT ARROW</b> key, the next page is displayed. 
                    </li>
                    <li>
                        <b>Row Selection</b> - The <b>SPACE</b> key can be used to mark a focused row as selected/unselected. This works if selection can be applied to a row (if the row is not a group or detail row, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSelectByRowClicktopic">SettingsBehavior.AllowSelectByRowClick</helplink> property is enabled, or the row contains a selection check box or button). Multiple rows can easily be selected by moving row focus with the <b>ARROW</b> keys (<b>UP</b>/<b>DOWN</b> or <b>LEFT</b>/<b>RIGHT</b>) while holding down the <b>SHIFT</b> key. 
                    </li>
                    <li>
                        Expanding/Collapsing Rows - The <b>PLUS</b> and <b>MINUS</b> keys can be used to expand and collapse group and detail rows, respectively. In addition, rows can be collapsed and expanded using the <b>LEFT ARROW</b> and <b>RIGHT ARROW</b> keys. 
                    </li>
                    <li>
                        Paging - The <b>SHIFT</b> + <b>PAGE UP</b> and <b>SHIFT</b> + <b>PAGE DOWN</b> key combinations can be used to go to the previous grid page and next grid page, respectively.
                    </li>
                </ul>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16906" Title="Online Documentation - Keyboard Navigation" />
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Accessibility/KeyboardSupportPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="RightToLeft" Title="Right to Left">
          <Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
          <Description>
            <![CDATA[
                <p>The DevExpress Grid View extension for ASP.NET MVC provides support for right-to-left languages such as Arabic and Hebrew. To switch the GridView extension to a right-to-left display, you will need to enable a single grid property - <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_RightToLefttopic">RightToLeft</helplink>. When this property is enabled, the text flows from right to left, and the layout of most grid UI elements is reversed.</p>
                <p>If you need to apply a right-to-left display for all DevExpress web controls within your web application, you can enable a specific configuration option within the web.config file, rather than change the RightToLeft property for each component. This option is <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink>, which can be accessed within the settings group of the devExpress section in the web.config file.</p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Accessibility/RightToLeftPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Localization" Title="Localization">
          <Description>
            <![CDATA[
              <p>This demo illustrates how you can use resources to incorporate different languages and cultures in ASP.NET MVC applications with DevExpress Extensions.</p>
              <p>In this demo, you can select the required culture with a combo box and apply it to the GridView. When the language is changed, GridView changes the following:</p>
              <ul>
                  <li>The column captions. Each column's Caption property is set to a corresponding resource value. When the current culture is changed, the required resource value is retrieved.</li>
                  <li>Date formatting. GridView columns automatically display DateTime values based on the applied culture.</li>
              </ul>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Accessibility/LocalizationPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>
  
    <DemoProduct Key="Report" Url="MVCxReportDemos" IsMvc="true" Title="Report" SeoTitle="ASP.NET MVC Report" NavItemTitle="Reporting" OrderIndex="1" IntegrationHighlighted="true">
      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument10005
      </DocUrl>

      <IntegrationImageUrl>~/Content/ReportsLargeLogo.png</IntegrationImageUrl>
      <IntegrationDescription>
        Native integration with DevExpress ASP.NET MVC Extensions and unparalleled design-time productivity
      </IntegrationDescription>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Reports">
        <BannerTitle>
          The No-Compromise Reporting Tool for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          Native integration with DevExpress ASP.NET MVC Extensions and unparalleled design-time productivity
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=NVT_Df317J0</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the XtraReports Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
            This website demonstrates some of the many features and capabilities available to you when using our <b>XtraReports Suite</b>. These features include:
          ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <DescriptionTitle>About Reporting</DescriptionTitle>
        <Description>
          <![CDATA[
              <p>The DevExpress Report  is displayed using the DocumentViewer extension in ASP.NET MVC web applications. Follow the three simple steps below to add a DevExpress DocumentViewer extension and bind it to your data. It's as easy as “M”, “V”, and “C”.</p>
              
              <p>1. Model (the "M" in MVC). First, you will need a Model object for the DevExpress DocumentViewer to bind to. Create a new data Model using the XtraReport Designer (<helplink href="http://help.devexpress.com/#XtraReports/CustomDocument9974">learn more in our online documentation</helplink>).</p>
              
              <p>2. View (the "V" in MVC). Next, declare the DocumentViewer extension inside of the View. Specifically, you will create a Partial View, because the DevExpress DocumentViewer extension provides AJAX callbacks by default, to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the DocumentViewer extension inside of the Partial View, and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property:</p>
              <code lang="html">
                @model XtraReport
                @Html.DevExpress().DocumentViewer(settings => {
                    settings.Name = "DocumentViewer";
                    settings.Report = Model;
                    settings.CallbackRouteValues = new { 
                      Controller = "Overview", 
                      Action = "OverviewPartial" 
                    };
                    settings.ExportRouteValues = new { 
                      Controller = "Overview", 
                      Action = "DocumentViewerExportTo" 
                    };
                }).GetHtml()
              </code>
              <br />
              <p>3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that handle DocumentViewer's callbacks. The "OverviewPartial" action method below handles the callbacks, while the <b>GetReport()</b> action method gets the data from the model to pass to the View. As you can see, the native DevExpress DocumentViewer extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.</p>
              <code lang="CSharp">
                public class HomeController: Controller {
                  public ActionResult Index() {
                    return View("Overview", GetReport());
                  }
                  public ActionResult OverviewPartial() {
                    return PartialView("OverviewPartial", GetReport());
                  }
                  public ActionResult DocumentViewerExportTo() {
                    return DocumentViewerExtension.ExportTo(GetReport());
                  }
                  XtraReport GetReport() {
                    return new XtraReportsDemos.Overview.Report();
                  }
                }
              </code>
            ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11536" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11431" Title="Documentation" />
        <KeyFeature Name="Export">
          <Description>
            <![CDATA[
             DocumentViewer allows you to export its data to PDF, XLS, XLSX, CSV, HTML, MHT, TEXT, Image and RTF formats.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Integration with Charting and OLAP Data Mining">
          <Description>
            <![CDATA[
             You can use a linked pair of PivotGrid and Chart controls to visualize your report data.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Conditional Formatting">
          <Description>
            <![CDATA[
             Conditional formatting allows you to change the appearance (and visibility) of report elements that satisfy a specific condition. 
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Master-Detail Report">
          <Description>
            <![CDATA[
             DocumentViewer allows you to present master-detail information of any complexity.
            ]]>
          </Description>
        </KeyFeature>
      </Overview>
      
      <DemoGroup Key="ReportTypes" Title="Report Types">
        <Demo Key="TableReport" Title="Table Report" SeoTitle="Table Report">
          <Description>
            <![CDATA[
                <p>This demo illustrates a way of creating a simple tabular report using the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRTabletopic">XRTable</helplink> control that allows you to quickly add a table to a report and then easily maintain its rows along with their cells.</p><p>This example creates a report with details on customer orders. In this demo, you can enter an appropriate order ID to filter a report's data source according to a specified value.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/ReportTypes/TableReport.cshtml</SourceFile>
          <SourceFile>~/Views/ReportTypes/TableReportViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
        <Demo Key="MasterDetailReport" Title="Master-Detail Report" SeoTitle="Master-Detail Report" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/MasterDetail.png">
          <Description>
            <![CDATA[
                  <p>This demo illustrates the simplest way to create a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1466">master-detail report</helplink> in a single report class.</p><p>To do this, you can use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIDetailReportBandtopic">Detail Report</helplink> bands instead of employing the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRSubreporttopic">XRSubreport</helplink> controls.</p><p>The resulting report represents data from a <b>Northwind</b> database. It consists of three levels of information on products and their suppliers, with the product orders grouped by their prices.</p>
                  ]]>
          </Description>
          <HighlightedDescription>
            The DevExpress ASP.NET MVC Reporting allows you to easily create complex hierarchical master-detail reports. This demo illustrates a master-detail report with nested detail report bands that reflect table relations in the report data source.
          </HighlightedDescription>
          <SourceFile>~/Views/ReportTypes/MasterDetail.cshtml</SourceFile>
          <SourceFile>~/Views/ReportTypes/MasterDetailViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
        <Demo Key="ReportMerging" Title="Report Merging" SeoTitle="Report Merging">
          <Description>
            <![CDATA[
                <p>This demo illustrates how different reports can be combined into one report. This may be useful, for instance, to print multiple documents as a single printer job, or to export many reports into a single PDF file.</p><p>Note that page orientation in the resulting document may be different for different pages, as well as the page size and other settings (e.g. watermarks, etc.) All this can be correctly previewed and exported with XtraReports.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/ReportTypes/ReportMerging.cshtml</SourceFile>
          <SourceFile>~/Views/ReportTypes/ReportMergingViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
        <Demo Key="SideBySideReport" Title="Side-by-side Reports" SeoTitle="Side-by-side Reports" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/SideBySide.png">
          <Description>
            <![CDATA[
                <p>XtraReports allows you to print multiple subreports <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5315">side-by-side</helplink> within one document. <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRSubreporttopic">Subreports</helplink> can be completely independent from each other, and can even be bound to their own datasource.</p><p>In this demo, a report is constructed by two identical subreports that are designed to show employee information. You can control which employee is to be shown on each report side, and this employee's name is passed to a subreport as a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument4812">parameter</helplink> to filter its data.</p>
                ]]>
          </Description>
          <HighlightedDescription>The DevExpress ASP.NET MVC Reporting allows you to seamlessly print multiple reports in a single document, side-by-side.</HighlightedDescription>
          <SourceFile>~/Views/ReportTypes/SideBySide.cshtml</SourceFile>
          <SourceFile>~/Views/ReportTypes/SideBySideViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="DataBinding" Title="Data Binding">
        <Demo Key="IListDataSourceReport" Title="IList DataSource" SeoTitle="Binding to IList DataSource">
          <Description>
            <![CDATA[
                <p>This demo illustrates how to bind a report to <helplink href="http://msdn.microsoft.com/library/system.collections.ilist.aspx">IList</helplink> data created and populated at runtime.</p><p>XtraReports works with all the data objects supported by <b>Visual Studio .NET</b> - OleDb, SQL, etc. And also it's possible to bind a report to XML data or to any data object implementing the <b>IList</b> interface.</p><p>This example creates a simple <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5162">table report</helplink> containing information on different kinds of fish. This information is stored in a text file and loaded at runtime when a report is created. The application reads this file line by line and creates a collection used as a datasource for creating data bindings.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/DataBinding/IListDataSource.cshtml</SourceFile>
          <SourceFile>~/Views/DataBinding/IListDataSourceViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="ComplexReports" Title="Real-life Reports">
        <Demo Key="FallCatalogReport" Title="Fall Catalog" SeoTitle="Fall Catalog">
          <Description>
            <![CDATA[
                <p>This demo illustrates how to create complex real-life reports with XtraReports. It introduces such basic XtraReports features as <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1298">data grouping</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument7789">sorting groups by summary</helplink>. This example represents the <b>Fall Catalog</b> report, which simulates the <b>Northwind Traders</b> reporting system.</p><p>In this demo, you can modify the <b>Sort Categories By</b> and <b>Sort Order</b> parameters and click <b>Submit</b> to see how these settings affect the demo report.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/ComplexReports/FallCatalog.cshtml</SourceFile>
          <SourceFile>~/Views/ComplexReports/FallCatalogViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="LayoutFeatures" Title="Layout Features">
        <Demo Key="VerticalAnchoringReport" Title="Vertical Anchoring" SeoTitle="Vertical Anchoring">
          <Description>
            <![CDATA[
                <p>This demo illustrates how report controls can be vertically anchored to top, bottom, or both sides of a band, which contains these controls. Use the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRControl_AnchorVerticaltopic">XRControl.AnchorVertical</helplink> property to accomplish this task.</p><p>In this demo, you can see two columns. The right column displays a car description, which is different for each car, and the left column contains a car image, which is anchored to top and bottom band sides. This allows its background to fill all empty space between top and bottom labels.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/LayoutFeatures/VerticalAnchoring.cshtml</SourceFile>
          <SourceFile>~/Views/LayoutFeatures/VerticalAnchoringViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="ReportControls" Title="Report Controls">
        <Demo Key="ChartReport" Title="Chart" SeoTitle="Report with Charts" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/Chart.png">
          <Description>
            <![CDATA[
                <p>This demo illustrates how to use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCharttopic">XRChart</helplink> control in XtraReports. In this report, every detail band contains a Bar chart, which shows <b>Products</b> for a specific <b>Category</b>. To create such report, a master-detail datasource is assigned to a report, and a chart's <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRChart_DataMembertopic">DataMember</helplink> property is set to the <b>Categories.CategoriesProducts</b> ADO.NET relation.</p>
                ]]>
          </Description>
          <HighlightedDescription>
            Easily integrate charts in any banded report using the DevExpress ASP.NET MVC Reporting. This demo illustrates a Bar chart embedded in a report band.
          </HighlightedDescription>
          <SourceFile>~/Views/ReportControls/Chart.cshtml</SourceFile>
          <SourceFile>~/Views/ReportControls/ChartViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
        <Demo Key="XRPivotGridReport" Title="Pivot Grid" SeoTitle="Pivot Grid" HighlightedIndex="4" HighlightedImageUrl="~/Content/DemoIcons/Pivot.png">
          <Description>
            <![CDATA[
                <p>This demo shows how to create a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5314">cross-tab report</helplink>. To accomplish this, use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRPivotGridtopic">XRPivotGrid</helplink> control (which can be added to any <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2590">report band</helplink>) and then bind it to a report's (or its own) datasource to display data in a matrix form.</p>
                ]]>
          </Description>
          <HighlightedDescription>
            The DevExpress ASP.NET MVC Reporting allows you to add a Pivot Grid to your report and bind it to the report’s data source. This demo illustrates a pivot grid embedded in a report band.
          </HighlightedDescription>
          <SourceFile>~/Views/ReportControls/PivotGrid.cshtml</SourceFile>
          <SourceFile>~/Views/ReportControls/PivotGridViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
        <Demo Key="PivotGridAndChartReport" Title="Pivot Grid and Chart" SeoTitle="Report with Pivot Grid and Chart">
          <Description>
            <![CDATA[
                <p>This demo illustrates how you can use a linked pair of the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRPivotGridtopic">XRPivotGrid</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCharttopic">XRChart</helplink> controls in your report. In this demo, a Pivot Grid instance is assigned to a Chart's <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRChart_DataSourcetopic">DataSource</helplink> property, and the options of this bridging are adjusted for best performance. In this demo, you can adjust some of these options in the <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument9623">Parameters</helplink> panel.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/ReportControls/PivotGridAndChart.cshtml</SourceFile>
          <SourceFile>~/Views/ReportControls/PivotGridAndChartViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Appearance" Title="Appearance">
        <Demo Key="FormattingRulesReport" Title="Conditional Formatting" SeoTitle="Conditional Formatting">
          <Description>
            <![CDATA[
                <p>This demo illustrates the use of <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5167">conditional formatting</helplink> in XtraReports.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/Appearance/FormattingRules.cshtml</SourceFile>
          <SourceFile>~/Views/Appearance/FormattingRulesViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>  
      </DemoGroup>

      <DemoGroup Key="WebSpecificFeatures" Title="Web-specific Features" IsUpdated="true">
        <Demo Key="ReportDesignerReport" Title="Web Report Designer" IsNew="true" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Designer.png">
          <Description><![CDATA[<p>This demo illustrates the HTML5 Web Report Designer that allows end-users to customize report structure on the web, without having to install additional software. To start customizing the report, click REPORT DESIGNER above the report viewer control.</p>]]></Description>
          <SourceFile>~/Views/WebSpecificFeatures/ReportDesignerReportViewer.cshtml</SourceFile>
          <SourceFile>~/Views/WebSpecificFeatures/ReportDesignerReportViewerPartial.cshtml</SourceFile>
          <HighlightedDescription>Check out the BETA version of the new JavaScript/HTML5 Report Designer for client-side in-browser report editing.</HighlightedDescription>
        </Demo>
        <Demo Key="ThumbnailsReport" Title="Thumbnails" SeoTitle="Thumbnails">
          <Description><![CDATA[
          <p>This demo illustrates how to create an alternative <b>Bookmarks List</b> for a web report.</p><p>In this example, every detail record is associated with an employee photo, and all photos are visible on the right panel.</p><p>You're able to click on any photo in the list, and the Document Viewer will automatically navigate to the appropriate employee's detail information.</p>
          ]]></Description>
          <SourceFile>~/Views/WebSpecificFeatures/ThumbnailsViewer.cshtml</SourceFile>
          <SourceFile>~/Views/WebSpecificFeatures/ThumbnailsViewerPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Reports.cs</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="Chart" Url="MVCxChartDemos" IsMvc="true" Title="DevExpress XtraCharts" SeoTitle="ASP.NET MVC Chart" SupportsTheming="false" NavItemTitle="Charting" OrderIndex="2" IntegrationHighlighted="true">
      <Keywords>
        Chart, Charts, XtraChart, Charting, ChartControl, Diagram, Visualization, Analyze, DataAnalyze, Analysis, DataAnalysis
      </Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://go.devexpress.com/DevExpress_DemoCenter_XtraChartsAsp_Doc.aspx
      </DocUrl>
      <IntegrationImageUrl>~/Content/Chart.png</IntegrationImageUrl>
      <IntegrationDescription>
        There are over 55 chart types for both 2D and 3D charting, featuring native integration with the DevExpress ASP.NET MVC OLAP Data Mining Pivot Grid Extension and the DevExpress ASP.NET MVC Reporting Platform.
      </IntegrationDescription>
      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Chart Extension">
        <BannerTitle>
          2D and 3D Charting ASP.NET MVC Extension
        </BannerTitle>
        <BannerText>
          There are over 55 chart types for both 2D and 3D charting, featuring native integration with the DevExpress ASP.NET MVC OLAP Data Mining Pivot Grid Extension and the DevExpress ASP.NET MVC Reporting Platform.
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the XtraCharts Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
            This website demonstrates some of the many features and capabilities available to you when using our <b>XtraCharts Suite</b>. These features include:
            ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <DescriptionTitle>About Charting</DescriptionTitle>
        <Description>
          <![CDATA[
              <p>The ASP.NET MVC Charts Suite offers you a comprehensive set of 2D and 3D charts to address a broad range of business needs with ease. Regardless of data source or the manner in which application information is stored on disk, the Chart Control promises flexibility and speed in its consumption of input data as well as its ability to output/render information on-screen or on the printed page.</p>
              <p> The code samples below demonstrate how to bind the WebChartControl to the HistoricPopulationModel object that implements the IList interface. The HistoricPopulationModel  defines a data source with data that shows population dynamic by years.    To provide chart data, you need to create a series (the "Area" series view, for example) and specify series data members. In addition, you can create a title for the chart and Y-axis and specify its text.</p>
              <p>Note that the chart control provides a built-in crosshair cursor (available for an XYDiagram2D chart type only) that is enabled automatically. Thus, you do not need to write any line of a code to implement this feature in your application. </p>
              <p>Partial View code:</p>
              <code lang="html">
                @Html.DevExpress().Chart(settings => {
                    settings.Name = "chart";
                    settings.Titles.Add(new ChartTitle() {
                        Font = new Font("Tahoma", 18),
                        Text = "Historic, current and future population"
                    });
                    Series series = new Series("Africa", 
                      DevExpress.XtraCharts.ViewType.Area);
                    series.ArgumentDataMember = "Year";
                    series.ValueDataMembers[0] = "Population";
                    settings.Series.Add(series);
                    XYDiagram diagram = (XYDiagram)settings.Diagram;
                    diagram.AxisY.Title.Text = "Population mid-year, millions";
                    diagram.AxisY.Title.Visible = true;
                }).Bind(Model).GetHtml()
              </code>
              <p>The Controller code implements the action that will obtain data from a datasource.</p>
              <p>Controller code:</p>
              <code lang="CSharp">
                public class HomeController: Controller {
                  public ActionResult Index() {
                    return View("Overview", 
                      HistoricPopulationModel.GetData());
                  }
                }
              </code>
            ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument9971" Title="Documentation" />
        <KeyFeature Name="Rich and Elegant Chart Types for Efficient Visual Representation">
          <Description>
            <![CDATA[
             <p>The Chart extension helps you transform data to its most appropriate, concise and readable visual representation. </p>
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Flexible Data Binding">
          <Description>
            <![CDATA[
             <p>Chart your data - regardless of its source. The data source you supply for the chart can be any object that supports the IList or IEnumerable interface. </p>
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Intuitive Design Time Tools">
          <Description>
            <![CDATA[
             <p>An easy-to-use built in chart wizard allows you to customize the main elements of a given chart. </p>
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Appearance Customization, Smart Labels, Titles and Annotations">
          <Description>
            <![CDATA[
             <p> Numerous built-in palettes (or style schemes) are available to you. </p>
             <p> You can manually specify label visibility and appearance, shadow style, and also its connector line's angle and length.  A title provides endless customization possibilities, including HTML-like text formatting.</p>
             <p>You can also create text or image annotations anchored to a chart, pane, or series point. </p>
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Multi-Dimensional Data Analysis and Reporting">
          <Description>
            <![CDATA[
             <p> Perform deep analysis of underlying chart data and easily compute summaries, averages, totals, custom functions. Turn information displayed within the DevExpress Pivot Grid into an interactive chart by simply specifying the Pivot Grid as the chart's data source. </p>
             <p>Built-in integration with both the XtraPrinting Library and XtraReports Suite means that charts can be embedded within any banded report, printed or exported to numerous file formats with absolute ease. </p>            
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Printing, Exporting, Drill-Through, Crosshairs and Tooltips">
          <Description>
            <![CDATA[
             <p> The Chart extension provides rich client-side API allowing end-users to change chart appearance, send it to the printer or save the chart to disk using popular file formats.</p>
             <p>The Chart extension allows end-users to dig deep into the information stored within a chart and directly interact with its contents using built-in tooltips and crosshair cursors.</p>            
            ]]>
          </Description>
        </KeyFeature>
      </Overview>

      <DemoGroup Key="ChartTypes" Title="Chart Types" SeoTitle="ASP.NET MVC Extensions - Chart">
        <Demo Key="BarViews" Title="Bar/Column Views" SeoTitle="Bar/Column Views" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Chart.png" HighlightedTitle="Chart Types">
          <Keywords>BarViews, ViewBars</Keywords>
          <Description>
            <![CDATA[
          <p>Bar/column series views are intended to display data points as vertical bars (or columns) that are grouped by category. In this case, category labels are displayed on the X-axis, while values are represented by the length of the bars as measured by the Y-axis.</p>
          <p>DevExpress MVC Chart supports a wide range of bar chart types (including side-by-side, stacked, full-stacked, etc.), both in 2D and 3D. You can see all of them in this demo by choosing the required view using the <b>View Type</b> combo-box.</p>
          <p>Other options include:</p>
          <ul>
            <li><b>Show Labels</b>. Indicates whether series labels should be visible on a chart.</li>
            <li><b>Rotated Diagram</b>. When unchecked, data points are represented as columns. Setting this option to true will rotate a diagram, so that data points are represented as horizontal bars.</li>
          </ul>
          ]]>
          </Description>
          <HighlightedDescription>Visualize the information relevant to your end-users via dozens of high-fidelity 2D and 3D chart types. The DevExpress Charts for ASP.NET MVC can be used in a nearly endless number of business scenarios, be it real-time charting or analysis of pivot grid data.</HighlightedDescription>
          <SourceFile>~/Views/ChartTypes/BarViewsPartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/BarViewsSideBySideStackedPartial.cshtml</SourceFile>
          <SourceFile>~/Models/GreatLakesStateProduct.cs</SourceFile>
          <SourceFile>~/Models/PopulationAgeStructure.cs</SourceFile>
        </Demo>
        <Demo Key="PointLineViews" Title="Point/Line Views" SeoTitle="Point/Line Views">
          <Keywords>PointView, LineView</Keywords>
          <Description>
            <![CDATA[
          <p>Point and line series views are used to show trends for several series on the same diagram, either as simple markers, or as markers connected by lines. These views include point, line, spline and other chart types, both in 2D and 3D. To see the entire list of available point/line views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
          <p>Also you can show or hide series labels by toggling the <b>Show Labels</b> checkbox in this demo's options.</p>
          ]]>
          </Description>
          <SourceFile>~/Views/ChartTypes/PointLineViewsPartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/PointLineViewsBubblePartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/PointLineViewsFullStackedLinePartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/PointLineViewsScatterLinePartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/PointLineViewsStackedLinePartial.cshtml</SourceFile>
          <SourceFile>~/Models/Movies.cs</SourceFile>
          <SourceFile>~/Models/MathematicsFunctions.cs</SourceFile>
          <SourceFile>~/Models/Architectures.cs</SourceFile>
          <SourceFile>~/Models/GreatLakesStateProduct.cs</SourceFile>
          <SourceFile>~/Models/CorporationsMarketValue.cs</SourceFile>
        </Demo>
        <Demo Key="AreaViews" Title="Area Views" SeoTitle="Area Views">
          <Description>
            <![CDATA[
          <p>Area series views are intended to show filled areas on a diagram. In these series, values are represented by heights of peaks and hollows in each data point. Values can be used either separately (simple areas) or in an aggregated manner (stacked and full-stacked areas). To see the entire list of available area views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
          <p>Also you can show or hide series labels by toggling the <b>Show Labels</b> checkbox in this demo's options.</p>
          ]]>
          </Description>
          <SourceFile>~/Views/ChartTypes/AreaViewsPartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/AreaViewsStackedPartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/AreaViewsFullStackedPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Architectures.cs</SourceFile>
          <SourceFile>~/Models/CorporationsMarketValue.cs</SourceFile>
        </Demo>
        <Demo Key="PieDoughnutViews" Title="Pie/Doughnut Views" SeoTitle="Pie/Doughnut Views">
          <Description>
            <![CDATA[
          <p>Pie and doughnut series views are intended to compare the percentage values of different point arguments in the same series. These charts may be useful to determine the most significant point value in the series, as well as the least significant. To see the entire list of available pie/doughnut views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
          <p>In this demo's options you can choose whether or not it is necessary to show series labels (<b>Show Labels</b>), whether they display absolute values or percents (<b>Values As Percent</b>) and adjust their position (<b>Label Position</b>).</p>
          <p>Also, you can select what pie slices should be expanded. For this, use the <b>Exploded Points</b> option.</p>
          ]]>
          </Description>
          <SourceFile>~/Models/Countries.cs</SourceFile>
        </Demo>
        <Demo Key="NestedDoughnutView" Title="Nested Doughnut View" SeoTitle="Nested Doughnut View" IsNew="true">
          <Description>
            <![CDATA[
            <p>This demo illustrates a Nested Doughnut series view, which is similar to the Doughnut series view, but compares series with one doughnut nested in another one.</p>
            <p>In this demo you can group series either by sex or age. To see percentage values of different point arguments in tooltips, hover the mouse cursor over a Nested Doughnut series.   In addition, you can change the hole radius percentage and inner indent to see how this affects the nested doughnut look.</p>
          ]]>
          </Description>
          <SourceFile>~/Models/PopulationAgeStructure.cs</SourceFile>
        </Demo>
        <Demo Key="FunnelViews" Title="Funnel Views" SeoTitle="Funnel Views">
          <Description>
            <![CDATA[
          <p>Funnel series views are intended to compare the values of different point arguments in the same series. These charts may be useful to determine the most significant point value in the series, as well as the least significant. To see the entire list of available funnel views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
          <p>Also, in this demo's options you can chose whether or not it is necessary to show series labels (<b>Show Labels</b>), whether they display absolute values or percents (<b>Values As Percent</b>) and adjust their position (<b>Label Position</b>).</p>
          ]]>
          </Description>
          <SourceFile>~/Models/WebSiteVisitors.cs</SourceFile>
        </Demo>
        <Demo Key="RadarPolarViews" Title="Radar/Polar Views" SeoTitle="Radar/Polar Views">
          <Description>
            <![CDATA[
          <p>Radar series views (also called as Spider or Star charts) and Polar series views are intended to display data as a circular graph. The Radar view is drawn on a circular grid and has multiple axes along which data can be plotted. The Polar view is similar to the Radar view, but displays values on the basis of angles (from 0 to 360 degrees).</p>
          <p>There can be different kinds of Polar and Radar views - Point, Line and Area. To see the entire list of available radar and polar views or to switch your current view to another, please use the View Type combo-box on the top of this demo.</p>
          <p>Other options include:</p>
          <ul>
            <li><b>Diagram Type.</b> Specifies whether a diagram should have a circular or a polygon shape.</li>
            <li><b>Show Labels.</b> Indicates whether or not series labels should be visible on a chart.</li>
            <li><b>Marker Kind.</b> Specifies the shape of data point markers.</li>
            <li><b>Marker Size.</b> Specifies the size of data point markers.</li>
          </ul>
          ]]>
          </Description>
          <SourceFile>~/Views/ChartTypes/RadarPolarViewsRadarPartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/RadarPolarViewsPolarPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Weather.cs</SourceFile>
          <SourceFile>~/Models/MathematicsFunctions.cs</SourceFile>
        </Demo>
        <Demo Key="RangeViews" Title="Range Views" SeoTitle="Range Views">
          <Description>
            <![CDATA[
          <p>Range series views are intended to visualize data points that have two values - minimum and maximum. These views can represent data either as bars or as a filled area. To see the entire list of available range views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
          ]]>
          </Description>
          <SourceFile>~/Models/OilPrices.cs</SourceFile>
        </Demo>
        <Demo Key="GanttViews" Title="Gantt Views" SeoTitle="Gantt Views">
          <Description>
            <![CDATA[
          <p>Gantt series views are intended to track different activities during a time frame. These charts are similar to Range Bar charts, yet always display the horizontal bars along the time axis. Gantt charts also provide support for displaying task links (arrowed lines) to indicate the workflow of a task represented on a chart.</p>
<p>Gantt charts can be either side-by-side or overlapped. To switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>In addition, this demo demonstrates how to make a Gantt chart interactive. For example, you can try to drag &amp; drop the <b>Progress Line</b> to change its current position and to modify the state of the <b>Completed</b> bar series.</p>
<p>Note: This interactivity is implemented using client-side events. To be able use these events on a client side, set the <b>ChartControlSettings.EnableClientSideAPI</b> property to <b>True.</b></p>
          ]]>
          </Description>
          <SourceFile>~/Views/ChartTypes/GanttViewsPartial.cshtml</SourceFile>
          <SourceFile>~/Views/ChartTypes/GanttViewsSideBySidePartial.cshtml</SourceFile>
          <SourceFile>~/Models/Projects.cs</SourceFile>
        </Demo>
        <Demo Key="FinancialViews" Title="Financial Views" SeoTitle="Financial Views">
          <Description>
            <![CDATA[
          <p>Stock and Candle-Stick series views (a.k.a. Low-High-Open-Close series) are often used in financial charts. These charts show variations in stock prices over the course of a day and are very useful in analyzing stock prices, bond prices and commodities behavior.</p>
<p>To see the entire list of available financial series views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>Other options include:</p>
<ul>
<li><b>Show Labels.</b> Indicates whether or not series labels should be visible on a chart.</li>
<li><b>Reduction Level.</b> Specifies a price value that is taken into account when analyzing the price action to ascertain whether or not a price reduction has taken place.</li>
<li><b>Label Level.</b> Specifies which value should be shown in point labels.</li>
<li><b>Show Only Work Days.</b> Indicates whether or not it is necessary to exclude holidays and weekends from the X-axis scale.</li></ul>
          ]]>
          </Description>
          <SourceFile>~/Models/Dell.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="DataBinding" Title="Data Binding">
        <Demo Key="SeriesBinding" Title="Binding Individual Series" SeoTitle="Binding Individual Series">
          <Description>
            <![CDATA[
          <p>DevExpress MVC Chart allows its series to be bound to data in two ways:</p>
<ul><li>All <b>Series</b> objects are manually added to the <b>ChartControlSettings.Series</b> collection, and each series is independently bound to appropriate data members from a chart's datasource.</li>
<li>All <b>Series</b> objects are generated dynamically from a chart's data source based on template settings specified via the <b>ChartControlSettings.SeriesTemplate</b> property.</li></ul>
<p>This demo illustrates how to use the <u>first</u> approach when each series is bound to data.</p>
<p>In this demo you can choose the category that has the products that should be displayed on a chart (via the <b>Filter By Category</b> option), as well as specify sorting rules (<b>Sort By</b> and <b>Sort Order</b> options). In addition, you can toggle the visibility of series labels via the <b>Show Labels</b> option.</p>
<p>Note that at the top-left of the chart there is information about the selected category, its minimum, maximum and average prices, dynamically updated every time you choose another category. This is implemented using the <b>BoundDataChanged</b> event that is raised after a new filter is applied.</p>
          ]]>
          </Description> 
          <SourceFile>~/Models/Northwind.cs</SourceFile>
        </Demo>
        <Demo Key="SeriesTemplateBinding" Title="Using Series Template" SeoTitle="Using Series Template" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/ChartDataBinding.png" HighlightedTitle="Data Binding">
          <Description>
            <![CDATA[
          <p>DevExpress MVC Chart allows its series to be bound to data in two ways:</p>
<ul><li>All <b>Series</b> objects are manually added to the <b>ChartControlSettings.Series</b> collection, and each series is independently bound to appropriate data members from a chart's datasource.</li>
<li>All <b>Series</b> objects are generated dynamically from a chart's data source based on template settings specified via the <b>ChartControlSettings.SeriesTemplate</b> property.</li></ul>
<p>This demo illustrates how to use the <u>second</u> approach, when all series are auto-generated from a datasource according to a specified series template.</p>
<p>In this demo, you can use the <b>Series Data Member</b> drop-down list to select a data field whose values are used to generate and populate series. If the "Year" field is selected, the chart shows GSP per Region for each Year. Otherwise, if "Region" is selected, the chart shows GSP per Year for each Region.</p>
          ]]>
          </Description>
          <HighlightedDescription>Chart your data - regardless of its source. Like other DevExpress ASP.NET MVC data-aware extensions, the data source you supply for the chart can be any object that supports the IList or IEnumerable interface. Therefore, you can bind the control to a table from a database or to any collection created in code.</HighlightedDescription>
          <SourceFile>~/Views/ChartTypes/SeriesTemplateBindingPartial.cshtml</SourceFile>     
        <SourceFile>~/Models/GSP.cs</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Miscellaneous" Title="Miscellaneous">
        <Demo Key="HitTesting" Title="Hit-testing" SeoTitle="Hit-testing">
          <Description>
            <![CDATA[
          <p>This demo illustrates the interactive capabilities of the DevExpress MVC Chart extension, in particular, a capability to access any chart's element via hit-testing. </p>
<p>In this demo, after the mouse cursor crosses over a chart's element, the detailed information is shown over the chart. This information describes the highlighted object and shows its underlying data (if any). If there are multiple objects layered under a test point, their hierarchy is reflected.</p>
<p>Note: To enable this feature, the <b>ChartControlSettings.EnableClientSideAPI</b> must be set to <b>True</b>.</p>
          ]]>
          </Description>
          <SourceFile>~/Models/Weather.cs</SourceFile>
        </Demo>
        <Demo Key="DrillDown" Title="Drill Down" SeoTitle="Drill Down" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/DrillDown.png">
          <Description>
            <![CDATA[
          <p>This demo illustrates how to create a drill-down chart.</p>
<p>The main chart is <b>Pie</b>, whose series points display the minimum price for each category. Clicking on any pie slice invokes the <b>Bar</b> chart, which displays all product prices in the selected category.</p>
<p>In the detail chart you can click the <b>Back to the main view...</b> hyperlink and the initial <b>Pie</b> chart will be restored.
Note: the <b>ChartControlSettings.EnableClientSideAPI</b> must be set to <b>true</b> to enable this feature.</p>
          ]]>
          </Description>
          <HighlightedDescription>
          DevExpress ASP.NET MVC Charts include the capability to drill down by displaying master-detail style data and using interlinked charts. This demo illustrates a sample drill down chart that can be clicked on to see the detail charts.
          </HighlightedDescription>
          <SourceFile>~/Views/Miscellaneous/DrillDownPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Miscellaneous/DrillDownCategoryPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
        </Demo>
        <Demo Key="PrintingAndExporting" Title="Printing and Exporting" SeoTitle="Printing and Exporting">
          <Description>
            <![CDATA[
          <p>This demo illustrates how to print and export MVC Chart on the client side. This is done by using the <b>Print</b>, <b>SaveToDisk</b> and <b>SaveToWindow</b> methods of the <b>MVCxClientChart</b>.</p>
<p>To explore this feature, you can click the corresponding buttons of the custom toolbar, which is shown at the top of the chart.</p>
          ]]>
          </Description>
          <SourceFile>~/Views/Miscellaneous/PrintingAndExportingPartial.cshtml</SourceFile>
          <SourceFile>~/Models/MicrosoftAnnualRevenue.cs</SourceFile>
        </Demo>
      </DemoGroup>      
    </DemoProduct>

    <DemoProduct Key="PivotGrid" Url="MVCxPivotGridDemos" Title="Pivot Grid" SeoTitle="ASP.NET MVC Pivot Grid" NavItemTitle="Pivot Grid" OrderIndex="3" IsMvc="true">
      <Keywords>analyze, mine, summary, data mining, olap</Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument10689
      </DocUrl>

      <IntegrationImageUrl>~/Content/PivotGrid.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC OLAP Data Mining Extension">
        <BannerTitle>
          Pivot Table&#174; Style Data Mining Extension for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          Simply bind the extension to data to allow end-users to slice and dice data, generating a nearly endless array of cross-tab reports
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://go.devexpress.com/DevExpress_AspDemos_ASPxPivotGrid_Video.aspx</BannerUrl>
        <DescriptionTitle>
          Welcome to the online demo site of the ASPxPivotGrid Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxPivotGrid Suite</b>. These features include:</p>
          ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <Description>
          <![CDATA[
            <p>
                The DevExpress Pivot Grid is the ultimate tool for organizing and analyzing your business data. Its main functionality is ability to summarize large amounts of information and represent it in a cross-tabulated form. This functionality allows creating financial and statistical reports.
            </p>
            <p>
              PivotGrid allows you to easily reorganize the extension's layout using drag-and-drop. As a result, business data will be re-summarized according to a new layout of column and row fields.
            </p>
            <p>
              The following code demonstrates how to add a pivot grid to your project, bind it to a data source, and create pivot grid fields that are mapped to appropriate fields from a database.
            </p>
              <p>Partial View code:</p>
              <code lang="html">
                @Html.DevExpress().PivotGrid(settings => {
                    settings.Name = "pivotGrid";
                    settings.CallbackRouteValues = new { 
                      Controller = "Overview", Action = "OverviewPartial" };
                    settings.OptionsView.ShowHorizontalScrollBar = true;
                    settings.Fields.Add("Extended_Price", PivotArea.DataArea);
                    settings.Fields.Add("CategoryName", PivotArea.RowArea);
                    settings.Fields.Add("Country", PivotArea.ColumnArea);
                    settings.Fields.Add("ProductName", PivotArea.FilterArea);
                }).Bind(Model).GetHtml()
              </code>
              <br />
              <p>The controller is where you will need to define the action methods that handle PivotGrid's callbacks. The "OverviewPartial" action method below handles the callbacks. While the <b>GetSalesPerson</b> action method gets the data from the model to pass to the View. As you can see, the native DevExpress PivotGrid extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.</p>
              <p>Controller code:</p>
              <code lang="CSharp">
                public class HomeController: Controller {
                  public ActionResult Index() {
                    return View("Overview", GetSalesPerson());
                  }
                  public ActionResult OverviewPartial() {
                    return PartialView("OverviewPartial", GetSalesPerson());
                  }
                  public static IEnumerable GetSalesPerson() {
                    NorthwindDataContext db = new NorthwindDataContext();
                    return from salesPerson in db.SalesPersons select salesPerson;
                  }
                }
              </code>
            ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument10689" Title="Documentation" />
      <KeyFeature Name="Support for Multiple Datasource Types">
        <Description>
          <![CDATA[
             <p>The DevExpress Pivot Grid provides full support for regular or custom data sources that implement the IList or IEnumerable interface. Also, you can use MS Analysis Services (OLAP) as a data source for PivotGrid.</p>
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Fully Customizable Reports">
        <Description>
          <![CDATA[
             <p>With PivotGrid, users can easily change a report's layout visually in order to examine data from different/multiple perspectives.</p>
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Hierarchical Values Arrangement">
        <Description>
          <![CDATA[
             <p>The PivotGrid extension allows analyzing raw or summarized data. Filed values are automatically arranged into a tree structure, and end-users are free to expand and collapse child groups to see more summarized or raw reports.</p>
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Automatic and Manually Specified Totals">
        <Description>
          <![CDATA[
             <p>PivotGrid allows displaying grand totals for each row and column automatically. If the built-in summary calculation does not meet a certain business requirement, you can display any number of totals for any value group.</p>
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Data Sorting and Displaying Top Rows">
        <Description>
          <![CDATA[
             <p>PivotGrid automatically sorts row and column values so you can easily locate required data. You can also specify the number of top rows to display a specific number of best-selling or worst-selling products for each year, month, customer, etc.</p>
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Data Filtering">
        <Description>
          <![CDATA[
             <p>Filtering allows you to display a subset of rows and/or columns that meet a specific criteria. When filtering is applied to PivotGrid, only field values that meet a specified criteria are displayed.</p>
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Integration with the ASP.NET MVC Charts Suite">
        <Description>
          <![CDATA[
             <p>Data displayed in PivotGrid can be visualized using the DevExpress ASP.NET MVC Chart extension.</p>
            ]]>
        </Description>
      </KeyFeature>
      </Overview>
      
      <DemoGroup Key="SampleReports" Title="Sample Reports">
        <Demo Key="SampleReports" Title="Sample Reports" SeoTitle="Sample Reports">
          <Description>
            <![CDATA[
            <p>
            This demo includes a set of reports for analyzing business data. Use Radio buttons to switch between reports.
            </p><ul><li>
              <b>Customers</b> - in this report, MVC Pivot Grid summarizes orders made by customers during a specific time period. The volume of orders is given for each product bought by a customer by quarters.
              </li><li>
              <b>Products(Filtering)</b> - in this report, MVC Pivot Grid displays products bought by customers within a year. Use the Year and Quarter combo boxes to specify which period should be displayed.
              </li><li>
              <b>Top 2 Products</b> - in this report, MVC Pivot Grid lists the most two popular products for each customer (those that attract the biggest interest). Clicking the 'Product Name' field header reverses the current sort order and the control displays the least popular products for each customer.
              </li><li>
              <b>Top 10 Customers</b> - MVC Pivot Grid lists top 10 customers, who purchased the biggest number of items. Clicking the 'Customer' field header reverses the sort order and displays those customers who purchased the smallest number of items.
            </li></ul>
          ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/SampleReports/SampleReportsPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Features" Title="Data Related Features">
        <Demo Key="Groups" Title="Field Groups" SeoTitle="Field Groups">
          <Description>
            <![CDATA[
            <p>
            This demo shows the capability to group fields so that they are always kept together. For instance, if you drag a field from a group to another position, the entire group is moved.
            </p><p>
            End-users cannot break created groups. They can only expand and collapse groups at any level to show or hide data related to particular fields.
            </p><p>
            In this demo, fields located within the Row, Column and Data areas are joined into groups. You can drag them, expand and collapse individual fields.
            </p>
          ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Features/GroupsPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="SortBySummary" Title="Sort By Summary" SeoTitle="Sort By Summary">
          <Description>
            <![CDATA[
              <p>
              This demo illustrates the Sorting By Summary feature that allows you to sort column or row field values by summary values calculated against a specific data field. In this example, the values of the 'Sales Person' field are actually sorted by summary values calculated against another data field. You can select this data field via the combo box at the top of the pivot grid. Clicking the 'Sales Person' field will reverse the current sort order.
              </p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Features/SortBySummaryPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="FieldsCustomization" Title="Fields Customization" SeoTitle="Field Chooser Window">
          <Description>
            <![CDATA[
              <p>
              This example shows the Fields Customization Window. It allows you to temporarily hide specific fields and then restore them again when needed. You can show and hide the Fields Customization Window both on the server (using C# or VB code) and on the client (using JavaScript).
              </p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Features/FieldsCustomizationPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="DrillDown" Title="Drill Down" SeoTitle="Drill Down" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/DrillDown.png">
          <Description>
            <![CDATA[
            <p>
            MVC Pivot Grid includes the drill-down capability that enables you to retrieve a list of records that were used to calculate a particular summary.
            </p><p>
            In this demo, click a summary cell to view the records from the control's underlying datasource associated with this cell. The obtained data is displayed by the GridView extension within a popup window.
            </p>
            ]]>
          </Description>
          <HighlightedDescription>
            Cells in a pivot grid display summarized data. Use the DevExpress ASP.NET MVC Pivot Grid Extension drill down functionality to view the records used to create the summary data.
          </HighlightedDescription>
          <SourceFile>~/Views/Features/DrillDownPivotGridPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Features/DrillDownGridViewPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="DataOutput" Title="Data Output">
        <Demo Key="ChartsIntegration" Title="Charts Integration" SeoTitle="Charts Integration" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Chart.png" HighlightedTitle="Charts Integration">
          <Description>
            <![CDATA[
            <p>
            The MVC Pivot Grid allows data it displays to be visualized using the Chart extension. The pivot grid provides currently visible data and acts as a datasource for the chart.
            </p><p>
            If you display data horizontally, the Chart extension uses row values as series and column values as arguments, or vice versa if you wish to visualize data vertically. In this demo, you can control this via the 'Generate Series from Columns' check box. 
            </p><p>
            To specify whether Grand Totals are included in the chart, use the 'Show Column Grand Totals' and 'Show Row Grand Totals' check boxes.
            </p>
          ]]>
          </Description>
          <HighlightedDescription>
            Easily visualize Pivot Grid data by displaying it as a chart. The DevExpress Pivot Grid Extension allows you to visualize pivot grid data using the DevExpress Charts Suite. This demo illustrates a pivot grid integrated with a chart.
          </HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/DataOutput/ChartsIntegrationPivotPartial.cshtml</SourceFile>
          <SourceFile>~/Views/DataOutput/ChartsIntegrationChartPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Export" Title="Export" SeoTitle="Data Export to PDF, XLS, HTML">
          <Description>
            <![CDATA[
            <p>
            MVC Pivot Grid allows you to export its content to the PDF, Excel, MHT, Plain Text and RTF formats. This demo shows how to export MVC Pivot Grid to a stream, providing a user an option to open the report or save it to a disk.
            </p>
          ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/DataOutput/ExportPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Layout" Title="Compact Layout">
        <Demo Key="CompactLayout" Title="Compact Layout" SeoTitle="Compact Layout">
          <Description>
            <![CDATA[
            <p>
            By default, MVC Pivot Grid shows all rows in a hierarchical way, which is common for pivot tables (<b>Full Layout</b>). However, when there are a lot of fields in the Row Area, this kind of presentation may produce a cumbersome layout. To avoid this, the PivotGrid extension allows you to arrange row headers in a tree-like manner (<b>Compact Layout</b>), as shown in this demo. 
            </p>
          ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Layout/CompactLayoutPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="OLAP" Title="OLAP">
        <Demo Key="OLAP" Title="OLAP" SeoTitle="OLAP">
          <Description>
            <![CDATA[
            <p>
            It is likely that the most important MVC Pivot Grid functionality is OLAP support. MVC Pivot Grid supports both Microsoft Analysis Services 2000, 2005, 2008 and 2008 R2. It can use an ordinary server, http server or cube file as a datasource. The OLAP connection reduces the computing load on the web server by passing it to an OLAP server.
            </p><p>
            No model is required to establish an OLAP connection. All you need is to provide a connection string using the BindToOLAP method.
            </p><p>
            To connect to OLAP cubes, you should have Microsoft SQL Server 2005 Analysis Services 9.0 OLE DB Provider installed on your system. You can get the latest version of this provider here: <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=50b97994-8453-4998-8226-fa42ec403d17">http://www.microsoft.com/downloads/details.aspx?FamilyID=50b97994-8453-4998-8226-fa42ec403d17</a>.
            </p>
          ]]>
          </Description>
          <SourceFile>~/Views/OLAP/OLAPPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Templates" Title="Templates">
        <Demo Key="Templates" Title="Templates" SeoTitle="Templates" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/CellTemplate.png">
          <Description>
            <![CDATA[
            <p>
            This demo shows a share of sales per product and per category. This report contains absolute and percent values, and their graphical representation.
            </p>
          ]]>
          </Description>
          <HighlightedDescription>
            The DevExpress Pivot Grid Extension for ASP.NET MVC provides you with a set of templates for specifying the layout of its elements. The Cell Template allows you to customize the template for the content displayed in cells.
          </HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Templates/TemplatesPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="Spreadsheet" Url="MVCxSpreadsheetDemos" IsMvc="true" NavItemTitle="Spreadsheet" Title="Spreadsheet" SeoTitle="ASP.NET MVC Spreadsheet Extension" OrderIndex="4" IntegrationHighlighted="true" IsNew="true">
      <IntegrationImageUrl>~/Content/Spreadsheet.png</IntegrationImageUrl>
      <IntegrationDescription>
        Excel inspired UI, read/write XLSx, XLS, CSV and TXT files
      </IntegrationDescription>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Spreadsheet Extension">
        <BannerTitle>
          Spreadsheet for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          Excel inspired UI, read/write XLSx, XLS, CSV and TXT files
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl></BannerUrl>
        <DescriptionTitle>
          Welcome to the online demo site of the ASP.NET MVC Spreadsheet
        </DescriptionTitle>
        <Description>
          <![CDATA[
            ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <Description>
          <![CDATA[
        <p>
		The new DevExpress ASP.NET MVC Spreadsheet is an Excel inspired extension that allows you to introduce spreadsheet functionality to any ASP.NET MVC application with ease. It provides a rich UI and comprehensive API to create, manage and convert spreadsheet files. Your application will not require Microsoft Excel to be installed on your computer, and those of your end-users, to accomplish these tasks.
		</p>
		<p>
		The following code demonstrates how to add a spreadsheet to your web project and programmatically load an XLSX document to the spreadsheet.</p>
        <p>View code:</p>
        <code lang="html">
          @using(Html.BeginForm()) {
              @Html.Partial("OverviewPartial")
          }
        </code>
        <p>Partial View code:</p>
        <code lang="html">
          @Html.DevExpress().Spreadsheet(
              settings => {
                  settings.Name = "spreadsheet";
                  settings.CallbackRouteValues = new { Controller = "Home", Action = "OverviewPartial" };
                  settings.DownloadRouteValues = new { Controller = "Home", Action = "Download" };
              }
          ).Open(Server.MapPath("~/App_Data/Documents/MonthlyBudget.xlsx")).GetHtml()
        </code>
        <p>Controller code:</p>
        <code lang="CSharp">
          public class HomeController : Controller {
	          public ActionResult Overview() {
		          return View("Overview");
	          }
	          public ActionResult OverviewPartial() {
		          return PartialView("OverviewPartial");
	          }
	          public FileStreamResult Download() {
		          return SpreadsheetExtension.DownloadFile("spreadsheet");
	          }
          }
        </code>
            ]]>
        </Description>
      <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument17114" Title="Documentation" />
      <KeyFeature Name="Microsoft Office Inspired UI">
        <Description>
          <![CDATA[
             The ASP.NET MVC Spreadsheet provides a UI experience similar to the one your end-users expect from today's most popular office productivity suite. It includes full integration with the <a href="https://demos.devexpress.com/MVCxNavigationAndLayoutDemos/Ribbon/Overview">DevExpress ASP.NET MVC Ribbon</a> extension, so you can quickly deliver stunning applications.

            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Support for Popular File Formats">
        <Description>
          <![CDATA[
             With the DevExpress ASP.NET MVC Spreadsheet, you and your end-users can load, convert and save workbooks in popular spreadsheet file formats such as XLS, XLSX, XLSM, CSV, TXT and ODS.
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Formula Calculation Engine">
        <Description>
          <![CDATA[
             Perform complex calculations using formulas with various functions and cell references, and create shared and array formulas. A comprehensive range of Microsoft Excel compatible functions is supported for use within formulas.
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Integrated Charts">
        <Description>
          <![CDATA[
             A variety of chart types and built-in presets allow you to display data for your customers in a meaningful way. Also, our native chart engine can display charts so that their appearance is similar to the charts found in Microsoft Excel.
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Pictures">
        <Description>
          <![CDATA[
             Insert, move, change, transform and delete pictures incorporated into a worksheet.
            ]]>
        </Description>
      </KeyFeature>	  
      <KeyFeature Name="Mail Merge Support">
        <Description>
          <![CDATA[
             An integrated mail-merge engine allows you to programmatically create personalized letters, catalogs and a myriad of business reports that are only possible with the capabilities inherent in a spreadsheet.
            ]]>
        </Description>
      </KeyFeature>	  
      </Overview>

      <DemoGroup Key="Features" Title="Features">
        <Demo Key="DocumentManagement" Title="Document Management" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/DocumentManagement.png" HighlightedTitle="Document Management">
          <Description>
            <![CDATA[
             <p>
			 With the DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink>, you can easily provide end-users the ability to view and modify Excel workbooks in a browser. The Spreadsheet extension can read and write files in XLS, XLSX, CSV and TXT formats. You can allow end-users to perform file management operations (such as creating a new spreadsheet, opening an existing spreadsheet or saving a spreadsheet) via the corresponding ribbon command buttons. These buttons are available in the <b>File</b> tab of the built-in ribbon.
			 </p>
			 <p>
			 This demo illustrates how easy it is to use the Spreadsheet to open and save spreadsheet documents in different formats. Simply add the Spreadsheet extension to a view and set a single property - <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcSpreadsheetSettings_WorkDirectorytopic">SpreadsheetSettins.WorkDirectory</helplink>. This property specifies the folder on the server where documents should be opened or saved.
			 </p>
            ]]>
          </Description>
          <HighlightedDescription>
          The DevExpress ASP.NET MVC Spreadsheet provides a rich UI and comprehensive API to manage (create, upload, open and save) spreadsheet files, to convert them to/from different popular formats.
          </HighlightedDescription>
          <SourceFile>~/Views/Features/DocumentManagementPartial.cshtml</SourceFile>
        </Demo>
        
        <Demo Key="Formulas" Title="Formulas" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Formulas.png" HighlightedTitle="Formulas">
          <Description>
            <![CDATA[
          <p>
          Formulas are one of the most commonly used features of spreadsheets. With the DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink>, you can easily insert and calculate formulas in a manner similar to Microsoft Excel.
          </p>

          <p>
          A formula is a string expression that begins with an equal (=) sign. It can contain constants, operators, cell references, functions and names.
          </p>

          <p>
          The Spreadsheet's built-in functions cover a wide range of categories - from basic mathematical operations such as simple addition and subtraction, to complex engineering and statistical calculations. This can meet even the most demanding requirements. The function categories provided include:
          </p>

          <ul>
          <li>Financial</li>
          <li>Statistical</li>
          <li>Engineering</li>
          <li>Logical</li>
          <li>Text</li>
          <li>Date & Time</li>
          <li>Lookup & Reference</li>
          <li>Math & Trig</li>
          <li>Informational</li>
          </ul>

          <p>
          The built-in functions are listed within an Excel-like <b>Formulas</b> tab in the Spreadsheet's automatically generated Ribbon. In this tab, functions are divided into groups for easy access.
          </p>

          <p>
          A formula can contain references to other cells or cell ranges within the same or different worksheets. The following references are supported:
          </p>

          <ul>
          <li>Relative, Absolute and Mixed References</li>
          <li>Cross-Worksheet References</li>
          <li>3D References</li>
          <li>Structured References</li>
          <li>External References</li>
          </ul>

          <p>
          See how formulas are used in this demo to calculate the prices of each product and the total invoice price.
          </p>
            ]]>
          </Description>
          <HighlightedDescription>
          A spreadsheet formula is an equation that performs a calculation on numbers, functions, and values of one or more cells. The ASP.NET Spreadsheet supports a comprehensive range of Microsoft Excel compatible functions for use within formulas.
          </HighlightedDescription>
          <SourceFile>~/Models/Invoices.cs</SourceFile>
          <SourceFile>~/Views/Features/FormulasPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Charts" Title="Charting" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Charts.png" HighlightedTitle="Charts">
          <Description>
            <![CDATA[
            <p>
            Charts are used in spreadsheets to make it easier to understand large quantities of data by visualizing the relationship between different data series. 
            </p>
            <p>
           The DevExpress MVC ASP.NET <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> allows you to easily insert a professional-looking chart that displays the details you require. A comprehensive set of 2D and 3D charts is provided to address a broad range of business needs with ease.
            </p>
            <p>
            To create a chart, select a series of data within a worksheet and click on the required chart type within the user interface Ribbon's <b>Insert</b> tab. The data can be arranged in rows or columns - the ASP.NET MVC Spreadsheet automatically determines the best way to plot the data on the chart. For plotting charts, the Spreadsheet uses the powerful charting functionality of the DevExpress ASP.NET MVC Chart extension.
            </p>
            <p>
            You can move a chart to any location on a worksheet by dragging it. You can also change the size of the chart for a better fit.
            </p>
            <p>
            In this demo, two charts - of the pie and bar types - are created to visualize information present on the Portfolio worksheet. Note that the data series used by the charts are calculated on a separate <b>Calculations</b> worksheet. You can explore this sheet by enabling the check box at the top of the demo page.
            </p>
            ]]>
          </Description>
          <HighlightedDescription>
          Charts can help you display data in ways that are meaningful to your customer. Select from a variety of chart types (such as a bar chart or a line chart) and their subtypes (such as a stacked horizontal pyramid chart or a 3-D line chart).
          </HighlightedDescription>
          <SourceFile>~/Views/Features/ChartsPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Images" Title="Images">
          <Description>
            <![CDATA[
          <p>
          The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> allows you to insert pictures into a worksheet.
          </p>

          <p>
          To insert a picture, select the cell where you wish to place the picture and click on the <b>Picture</b> item within the user interface Ribbon's Insert tab. The pictures to insert may be located on your computer or on the web. You can also move, transform and delete pictures in a worksheet. 
          </p>

          <p>
          This demo shows how personal photos can be programmatically added to each data row containing employee information.
          </p>
            ]]>
          </Description>
          <SourceFile>~/Models/Employees.cs</SourceFile>
          <SourceFile>~/Views/Features/ImagesPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Forms" Title="Forms">
          <Description>
            <![CDATA[
             <p>
			 A form is a file that can filled in by a user based on predefined options. By creating a form in a spreadsheet, advanced calculations can be performed on the data entered.
			 </p>
			 <p>
			 This demo illustrates how the DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can be used to fill in a simple form. Enter the terms of the vehicle purchase and the vehicle lease to compare, and determine which is better. Try entering data into the white fields and notice how the grey fields are calculated automatically. Alternatively, you can click the <b>Fill with sample data</b> check box at the top to quickly fill the form with sample data.
			 </p>
            ]]>
          </Description>
          <SourceFile>~/Views/Features/FormsPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      
      <DemoGroup Key="MailMerging" Title="Mail Merge">
        <Demo Key="MailMerge" Title="Mail Merge" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/MailMerge.png" HighlightedTitle="Mail Merge">
          <Description>
            <![CDATA[
<p>
The Mail Merge functionality provided by the DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> enables you to automatically generate a set of documents based on a common template and fill each document with unique data values retrieved from a data source. This feature can be useful for a variety of business requirements, such as personalizing letters, and composing catalogs and reports.
</p>
<p>
To perform a mail merge, you need a template and a data source. 
</p>
<p>
A <b>template</b> is a spreadsheet document that contains static information (which is the same for all resulting documents) and mail merge fields. A mail merge field is a placeholder in which a value from the specified data source field will appear in a merged document. To insert fields into template cells, use the following special functions in cell formulas: FIELD and FIELDPICTURE.
</p>

<p>
A <b>data source</b> (Model) contains data that will be merged into fields in a template to create merged documents. 
</p>
<p>
Within a template, you can choose a <b>mail merge mode</b> specifying how the result of the mail merge should be generated. The mail merge mode is specified programmatically at the template workbook level, by setting a specific defined name ("MAILMERGEMODE") to a particular string constant ("Worksheets" or "OneWorksheet").
</p>
<ul>
<li>
<b>"OneWorksheet"</b> (Single Sheet) - Merged ranges for all data source records are inserted one after another (vertically or horizontally, depending on the document orientation) into a single worksheet. This mode is used by default.
</li>
<li>
<b>"Worksheets"</b> (Multiple Sheets) - The merged range for each data source record is inserted into a separate worksheet in a single workbook.
</li>
</ul>
<p>
Note that by default, the "MAILMERGEMODE" defined name does not exist in a template workbook and the "Single Sheet" mode is used.
</p>
<p>
To initialize the mail merge process, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcSpreadsheetExtension_PerformMailMergetopic">PerformMailMerge</helplink> method of the Spreadsheet extension. This method accepts a set of parameters (which specify the path to a template, a data source object, the mail merge mode and etc.) and generates resulting documents containing the merged information (if the "Single Sheet" or "Multiple Sheets" mail merge mode is used, a single workbook is processed).
</p>
<p>
In this demo, we illustrate the merging of images along with personal information for contacts from the Northwind database's <i>Employees</i> table.
</p>
	        ]]>
          </Description>
          <HighlightedDescription>
          Whether you wish to generate personalized letters, company directories or interactive business reports, the built-in data merge capabilities offer a variety of runtime options.
          </HighlightedDescription>
          <SourceFile>~/Models/Employees.cs</SourceFile>
          <SourceFile>~/Views/MailMerging/MailMergePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="CustomDataMerge" Title="Custom Data Merge">
          <Description>
          <![CDATA[
          <p>
          In this demo, a spreadsheet template is loaded into the DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> and programmatically populated with data taken from an XML file. The template displays the predefined report layout and contains specific aggregate formulas. The data is retrieved from an XML file and merged with the corresponding worksheet cells into an integrated report. As a result, a worksheet represents a complete report calculated automatically.
          </p>
            ]]>
          </Description>
          <SourceFile>~/Models/ExpensesModel.cs</SourceFile>
          <SourceFile>~/Views/MailMerging/CustomDataMergePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      
      <DemoGroup Key="SpreadsheetAPI" Title="API">
        <Demo Key="CellValue" Title="Cell Value">
          <Description>
            <![CDATA[
             <p>
			 All worksheet data is stored in cells. Each cell can only hold and display a single piece of data - the cell value.
			 </p>
			 <p>
			 This example demonstrates how easy it is to programmatically add data of different types to worksheet cells. To do this, assign the required value to the <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressSpreadsheetRange_Valuetopic">Range.Value</helplink> property of a cell or range object. Use the properties of the <helplink href="http://help.devexpress.com/#CoreLibraries/clsDevExpressSpreadsheetCellValuetopic">CellValue</helplink> object returned by the Range.Value property to retrieve information about the cell value type, and get the cell value itself as an object of the corresponding type. To get the string specifying the formatted value as it is displayed in a cell, use the <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressSpreadsheetCell_DisplayTexttopic">Cell.DisplayText</helplink> property.
			 </p>
            ]]>
          </Description>
          <SourceFile>~/Views/SpreadsheetAPI/CellValuePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="FunctionsInFormulas" Title="Functions In Formulas">
          <Description>
            <![CDATA[
<p>
This example demonstrates how to programmatically use predefined functions in formulas to perform simple or complex calculations over arguments. Set the <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressSpreadsheetRange_Formulatopic">Range.Formula</helplink> property to a formula. Follow the rules below to create a formula that uses a function.
</p>
<ul>
<li>Start the formula with the "=" sign, as you usually do when creating formulas.</li>
<li>Specify the function name.</li>
<li>Specify the function arguments in parentheses. Arguments can be numbers, text and logical values, cell references and names, or other functions.</li>
</ul>
            ]]>
          </Description>
          <SourceFile>~/Views/SpreadsheetAPI/FunctionsInFormulasPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="CellStyle" Title="Cell Style">
          <Description>
            <![CDATA[
<p>
This example demonstrates how to programmatically modify format characteristics (the background color, font and alignment settings) of an individual cell and how to specify different borders for cell ranges.
</p>
<p>
To format an individual cell, access the corresponding <helplink href="http://help.devexpress.com/#CoreLibraries/clsDevExpressSpreadsheetCelltopic">Cell</helplink> object and modify its formatting properties.
</p>
<p>
To format a range of cells, modify the <helplink href="http://help.devexpress.com/#CoreLibraries/clsDevExpressSpreadsheetFormattingtopic">Formatting</helplink> object using the <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressSpreadsheetRange_BeginUpdateFormattingtopic">Range.BeginUpdateFormatting</helplink> - <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressSpreadsheetRange_EndUpdateFormattingtopic">Range.EndUpdateFormatting</helplink> method pair.
</p>
            ]]>
          </Description>
          <SourceFile>~/Views/SpreadsheetAPI/CellStylePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="AdvancedSpreadsheetAPI" Title="Advanced API">
        <Demo Key="DynamicSheetGeneration" Title="Document Generation">
          <Description>
            <![CDATA[
          <p>
          This demo illustrates how to populate a worksheet programmatically based on the parameters entered into the top panel. The API of the IWorkbook object is used to create data within cells and to perform the required calculations.
          </p>

          <p>
          In the top panel, you can change the loan characteristics. Data is automatically processed when you enter new values, and calculation results are displayed in corresponding cells.
          </p>
	        ]]>
          </Description>
          <SourceFile>~/Models/LoanAmortizationSchedule.cs</SourceFile>
          <SourceFile>~/Views/AdvancedSpreadsheetAPI/DynamicSheetGenerationPartial.cshtml</SourceFile>
          <SourceFile>~/Views/AdvancedSpreadsheetAPI/DynamicSheetGenerationFormLayoutPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="CustomDocumentManagement" Title="Custom Document Management">
          <Description>
            <![CDATA[
<p>
Although the DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> provides a built-in means to manage (create, open and save) files via the <b>File</b> ribbon tab, an external file management control can also be used with the Spreadsheet.
</p>
<p>
This demo illustrates how to use an external FileManager extension to navigate a document hierarchy and select a file to open. Documents can be opened from a specific folder on the server ("DocumentBrowsing"), and can also be uploaded to this folder from an end-user's computer. The selected document is opened within the Spreadsheet by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcSpreadsheetExtension_LoadDocumenttopic">SpeadsheetExtension.LoadDocument</helplink> static method. 
</p>
	        ]]>
          </Description>
          <SourceFile>~/Views/AdvancedSpreadsheetAPI/CustomDocumentManagementPartial.cshtml</SourceFile>
          <SourceFile>~/Views/AdvancedSpreadsheetAPI/CustomDocumentManagementFileManagerPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="SampleDocuments" Title="Sample Documents">
        <Demo Key="ProfitAndLoss" Title="Profit And Loss">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="http://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing a profit and loss statement. This demo tracks company income and expenses. You can view how expenses compare against gross profits in the line chart. Change revenue and expense amounts, and notice that the totals are recalculated automatically. The chart is updated as well.
</p>
	        ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Invoice" Title="Invoice">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.  
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing an invoice. Change the amounts in the quantity, price and discount columns, and notice that the totals are recalculated automatically.
</p>
	        ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="LoanAmortizationSchedule" Title="Loan Amortization Schedule">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing a loan amortization schedule. Change the values of the fields above the table (Loan amount, Annual interest rate, Loan period in years, Number of payments per year, etc.). Notice that the loan schedule is updated automatically, and the table below is recalculated.
</p>
	        ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ExpenseReport" Title="Expense Report">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing an expense report. Change the values in the amount columns, and notice how the totals are recalculated automatically.
</p>
	        ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="EmployeeInformation" Title="Employee Information">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing an employee payroll. Use the <b>Employee Information</b> or the <b>Payroll Calculator</b> sheet to modify editable values (values that do not contain formulas), and view the results of your changes in the <b>Individual Paystubs</b> sheet.
</p>
	        ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ShiftSchedule" Title="Shift Schedule">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing a shift schedule. The <i>Total</i> column contains array formulas for calculating the total number of work hours per shift, for each employee. Modify the cell values (by adding or deleting "manager", "cashier" or "front desk"). Notice that the <i>Total</i> column is automatically updated.
</p>
          ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="SportResults" Title="Sport Results">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing a sample application for processing sport results. Select the <b>Results</b> sheet and edit the positions in the Race 1, Race 2 and Race 3 columns of the <b>RESULTS</b> table. The total points scored by drivers and the Top 10 rankings are calculated automatically.
</p>
          ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="HomeAccounting" Title="Personal Finance">
          <Description>
            <![CDATA[
<p>
The DevExpress ASP.NET MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument17114">Spreadsheet</helplink> can load a wide variety of formatted Excel documents. The spreadsheet documents used in this demo section are based on popular Microsoft Excel templates that you can download from Microsoft’s <a href="https://store.office.live.com/templates/templates-for-Excel">Templates for Excel</a> page.
</p>
<p>
In this demo, the Spreadsheet programmatically opens an XLSX document representing a sample application for tracking income and expenses. The workbook contains income and expense columns divided into categories and organized in tabs by month. You can review income and expense records by month, as well as a summary of income and expenses (the last tab to the right), and modify them as required. Aggregate sums are recalculated automatically.
</p>
          ]]>
          </Description>
          <SourceFile>~/Views/SampleDocuments/SampleDocumentSpreadsheetPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="NavigationAndLayout" Url="MVCxNavigationAndLayoutDemos" Title="Navigation and Layout Extensions" SeoTitle="ASP.NET MVC Navigation and Layout Extension" NavItemTitle="Navigation and Layout" OrderIndex="4" IsMvc="true">
      <Keywords>navigation, layout, markup</Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument8963
      </DocUrl>

      <IntegrationImageUrl>~/Content/Navigation_and_Layout.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Navigation and Layout Controls">
        <BannerTitle>
          Navigation and Layout Controls for ASP.NET
        </BannerTitle>
        <BannerText>
          A comprehensive collection of site navigation and layout tools for building easy-to-navigate, user-friendly websites and web applications.
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=I2lU7SS3BaY</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the ASPxperience Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>
                  This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>. 
                  These features include: 
              </p>
              ]]>
        </Description>
      </Intro>
      <DemoGroup Key="FormLayout" Title="Form Layout" SeoTitle="ASP.NET MVC Form Layout Extension">
        <Keywords>formlayout, inputs, editing, forms</Keywords>
        <Overview Title="Overview">
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC FormLayout extension delivers a comprehensive form design feature set. Use the FormLayout to easily create form layouts of any complexity by combining the order and hierarchy of the provided layout elements. </p>
                <p>To create a well-designed form capable of editing Model class instances, simply add the FormLayout to the View and bind its layout item to the Model class fields.</p>
                <p>View code:</p>
                <code lang="html">
                @Html.DevExpress().FormLayout(settings => {
                    settings.Name = "flOverview";
                    settings.Items.AddGroupItem(groupSettings => {
                        groupSettings.Caption = "Employees";
                        groupSettings.Items.Add(m => m.FirstName);
                        groupSettings.Items.Add(m => m.LastName);
                        groupSettings.Items.Add(m => m.Note, itemSettings => {
                            itemSettings.NestedExtensionType = 
                              FormLayoutNestedExtensionItemType.Memo;
                        }); 
                    });
                }).GetHtml()
                </code>
                <p>The FormLayout extension will automatically create data editors capable of editing and displaying the required fields, but you will still have the ability to nest your own data editors.</p>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/watch?v=ugLfrjEGHF0" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument16039" Title="Documentation" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             FormLayout can be used to edit and display fields of a Model class instance or another object (e.g., the ViewBag item).
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Seamless Integration with DevExpress Data Editors">
            <Description>
              <![CDATA[
             DevExpress Data Editors can be seamlessly integrated into a FormLayout bound to data. In this case, the nested Data Editor is automatically bound to the corresponding field of the data source. 
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Support for Third-Party Components">
            <Description>
              <![CDATA[
             You have the ability to nest any component you wish into the layout item.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Help Text Rendering">
            <Description>
              <![CDATA[
             FormLayout can render the Help Text - a brief description of the purpose of the nested editor.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Groups">
            <Description>
              <![CDATA[
             Groups can be rendered as tab containers or group box containers.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features" SeoTitle="Features" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/FormLayout.png" HighlightedTitle="Form Layout Extension - Features">
          <Description>
            <![CDATA[
                <p>The FormLayout extension delivers a comprehensive form design feature set. This demo illustrates the primary features of the FormLayout.</p>
                <p>Use the FormLayout to easily create form layouts of any complexity by combining the order and hierarchy of provided layout elements. The FormLayout main layout elements are comprised of labeled items, labeled regular groups and tabbed groups.</p>
                <p>Item elements serve as placeholders for data editors or custom content. Group elements are containers for other layout elements. Group nesting is also available.</p> 
                <p>Items allow you to define inline help texts that describe editor definitions. Help texts can also be defined at the nested editor's level (if DevExpress data editors are used in items). An editor's help text can be displayed either always (as an editor inline text) or only when the data editor receives focus (as a popup tooltip). Take a look at the memo editor behavior in this demo.</p> 
                <p>FormLayout can also display customizable text marks within item captions to indicate whether filling in an item editor is required or optional. The indicator display mode can be defined for all or individual items. The indicator type is determined based on a setting defined at the item editor level, an item level or "Required" annotation attribute.</p>
            ]]>
          </Description>
          <HighlightedDescription>The FormLayout extension helps you to easily create complex data forms in a matter of minutes. This demo showcases the stunning runtime features of the FormLayout, such as group settings, item caption settings and help text settings.</HighlightedDescription>
        </Demo>
        <Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding To Database">
          <Description>
            <![CDATA[
                <p>This demo illustrates how to use the <b>FormLayout</b> extension to edit data Model fields.</p>
                <p>In this demo, edited objects are passed from the controller to a strongly-typed View. The strongly-typed View contains the FormLayout extension with its layout items.</p> 
                <p><b>FormLayout</b> layout items are stored in the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFormLayoutSettings`1_Itemstopic">Items</helplink> collection, and are bound to Model fields using lambda expressions. Each layout item contains a nested data editor that allows end-users to edit corresponding field type values.</p>
                <p>When the edit form is submitted to the server, the edited record is updated within the data source.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/FormLayout/DataBindingPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
        </Demo>
        <Demo Key="TabbedGroups" Title="Selection-Dependent Inputs" SeoTitle="Interactive Edit Form">
          <Description>
            <![CDATA[
                <p>This demo illustrates how to implement a form that dynamically exposes different additional inputs depending upon an initial selection made by an end-user.</p>
                <p>In the demo, selection-dependent inputs are vertically separated from the user's initial options. Selection-dependent inputs are exposed below radio buttons using pages of a tabbed group. The tabbed group's decoration, such as tabs and borders, is hidden using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutTabbedLayoutGroup_ShowGroupDecorationtopic">ShowGroupDecoration</helplink> property, so that the group displays only the active page's content. The number and indexes of tabbed pages in the tabbed group directly correspond to the number and indexes of items within a radio button list. When an end-user selects a radio button in the list of options, the corresponding tabbed page is activated in the tabbed group via client code.</p>
            ]]>
          </Description>
          <SourceFile>~/Models/RegistrationForm.cs</SourceFile>
        </Demo>
        <Demo Key="RegistrationForm" Title="Registration Form" SeoTitle="Registration Form">
          <Description>
            <![CDATA[
                <p>In this demo, you can see how to use the <b>FormLayout</b> extension to create a complete and fully functional registration form.</p> 
                <p>Note that in addition to an elegant form UI with aligned captions and editors, this implementation provides the following features:</p>
                <ul>
                <li>Support for the automatic visualization of required field indicators. If the Model field is decorated with the <a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.requiredattribute.aspx">RequiredAttribute</a>, FormLayout automatically adds the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument16036">required marks</helplink> for the corresponding layout item.</li>
                <li>Both client and server validation of user input.</li>
                <li>Server-side Captcha verification.</li>
                </ul>
            ]]>
          </Description>
          <SourceFile>~/Models/RegistrationForm.cs</SourceFile>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality" SeoTitle="Client-Side Functionality">
          <Description>
            <![CDATA[
                <p>This example demonstrates how to manipulate the FormLayout extension programmatically on the client using our extended client-side functionality.</p>
                <p>In this demo, layout groups of the FormLayout extension are identified using their <helplink href ="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItemBase_Nametopic">Name</helplink> property. In order to obtain a specific layout group by its name on the client side the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutScriptsASPxClientLayoutItem_GetItemByNametopic">GetItemByName</helplink> method is used (see JS code). A particular layout group’s visibility is changed on the client with the help of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutScriptsASPxClientLayoutItem_SetVisibletopic">SetVisible</helplink> method by passing it the required boolean value.</p>
                <p>In this demo, when an end-user selects any of the radio button list items ("I am a new user" or "I am a registered user"), the UpdateItemsVisibility function is called. This function defines the visibility of all of the layout groups depending on the selected value within the radio button list.</p>
            ]]>
          </Description>
          <SourceFile>~/Models/RegistrationForm.cs</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Menu" Title="Menu" SeoTitle="ASP.NET MVC Menu Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
              <p>The DevExpress ASP.NET MVC Menu extension allows you to add menus to your website. You can add the menu content directly within your control, or populate it with data from a data source.</p>
              <p>To add a hierarchical Menu (with pop-out submenus) to your web application, add the Menu extension to the View, and add the required menu items and respective subitems.</p>
              <p>View code:</p>
              <code lang="html">
                @Html.DevExpress().Menu(settings => {
                    settings.Name = "mOverview";
                    settings.Items.Add(item => {
                        item.Text = "Home";
                        item.Image.Url = "~/Images/ButtonHome.png";
                        item.Items.Add("News");
                        item.Items.Add("Contact Us");
                    });
                    settings.Items.Add(item => {
                        item.Text = "Profile";
                        item.Image.Url = "~/Images/BO_Users_Large.png";
                        item.Items.Add("Change Password");
                    });
                    // And other items
                }).GetHtml()
              </code>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8968" Title="Documentation" />
          <KeyFeature Name="Binding to Data" DemoUrl="~/Menu/DataBinding">
            <Description>
              <![CDATA[
             You can bind a menu to a data source so that your menu structure is retrieved from an XML file, a SiteMap or a hierarchical list.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Scrollable Submenus">
            <Description>
              <![CDATA[
             Menu can display scroll buttons for submenus whose content does not fit within the visible area.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Templates">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within Menu, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for Menu. This functionality, coupled with the ability to handle events on the client side, gives you full control over the menu behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Popup Menu">
            <Description>
              <![CDATA[
             Popup Menu allows you to provide context-sensitive action lists to your end-users.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Horizontal and Vertical Layouts">
            <Description>
              <![CDATA[
             Horizontal or vertical layouts can be used at the root level. This means that you can build menus that open sideways, in addition to main menus.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features" SeoTitle="Features">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the key features of the DevExpress MVC Menu Extension. Use the items on the right to modify Menu properties.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_AllowSelectItemtopic.aspx">AllowSelectItem</helplink> property can be used to enable menu item selection on the client side. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_EnableHotTracktopic.aspx">EnableHotTrack</helplink> property allows you to specify whether menu items can visually respond to mouse hovering. By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_EnableAnimationtopic.aspx">EnableAnimation</helplink> property, you can specify whether an animation effect is used when invoking/hiding submenus.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_AppearAftertopic.aspx">AppearAfter</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_DisappearAftertopic.aspx">DissapearAfter</helplink> properties allow you to specify the delay (in milliseconds) used for the display of submenus within a Menu control.
            </p><p>
                <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_MaximumDisplayLevelstopic.aspx">MaximumDisplayLevels</helplink> can be used to specify a menu control's depth - the number of menu levels rendered by the Menu.
            </p>]]>
          </Description>
        </Demo>
        <Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Menu.png" HighlightedTitle="Menu - Data Binding">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates how the MVC Menu can be bound to a Model passed to a View from the Controller. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuExtension_Bindtopic.aspx">Bind</helplink> method is used to bind the Menu to the Model. Note that the MVC Menu can only be bound to hierarchal data sources, and as such, a Model object passed to the <b>Bind</b> method must support the <b>IHierarchicalEnumerable</b> interface.
            </p>
            <p>    
                The DevExpress MVC Menu Extension ships with following data binding methods:
            </p>
            <ul>
              <li>Bind(object dataObject);</li>
              <li>BindToSiteMap(string fileName);</li>
              <li>BindToSiteMap(string fileName, bool showStartingNode);</li>
              <li>BindToXML(string fileName);</li>
              <li>BindToXML(string fileName, string xPath);</li>
            </ul>
              ]]>
          </Description>
          <HighlightedDescription>The Menu extension allows you to add menus to your website. You can add the menu content directly within your control, or populate it with data from a data source.</HighlightedDescription>
          <SourceFile>~/Models/Categories.cs</SourceFile>
        </Demo>
        <Demo Key="DataBindingToSiteMap" Title="Data Binding to SiteMap" SeoTitle="Data Binding to SiteMap">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuExtension_BindToSiteMaptopic.aspx">BindToSiteMap</helplink> method can be used to easily populate the Menu for ASP.NET MVC with item information taken from a SiteMap file.
                </p>
                <p>
                    Note that the Menu for ASP.NET MVC is able to automatically retrieve item information by binding to data fields whose names coincide with property names of an item object (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_Texttopic.aspx">Text</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_Imagetopic.aspx">Image</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ToolTiptopic.aspx">ToolTip</helplink>). In this demo, the image path of items is obtained automatically from the corresponding attributes of data source nodes. The texts and navigation locations of items are retrieved from the standard attributes of a SiteMap file - the 'url' and 'title'.
                    The texts of items of the last nested level are composed dynamically, by concatenating the values of the 'result' and 'title' attributes. This processing is performed within a delegate of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_ItemDataBoundtopic.aspx">ItemDataBound</helplink> method, which allows you to manipulate the values being assigned to the properties of a menu item during its data binding.
                </p>
            ]]>
          </Description>
        </Demo>
        <Demo Key="PopupMenu" Title="Popup Menu" SeoTitle="Popup Menu">
          <Description>
            <![CDATA[
                    <p>
                    This demo demonstrates some of the features available to you within the DevExpress MVC PopupMenu Extension.
                    </p>
                    <p>
                    A popup menu can be associated with a specific web element using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupElementIDtopic.aspx">PopupElementID</helplink> property. The menu is invoked automatically when a specific action (a left or right mouse click or mouse hovering) defined by the PopupAction property is performed within the associated element.
                    </p>
                    <p>
                    In this example, PopupMenu is linked to an image. The popup menu is displayed by an action specified within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupActiontopic.aspx">PopupAction</helplink> dropdown editor. The menu's precise display position with respect to the associated web element can be defined by the <b>HorizontalAlign</b> and <b>VerticalAlign</b> combo boxes that control the values of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupHorizontalAligntopic.aspx">PopupHorizontalAlign</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupVerticalAligntopic.aspx">PopupVerticalAlign</helplink> properties, respectively.
                    </p>
                    <p>
                    The popup menu can be invoked programmatically as well. In this demo, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientPopupMenu_ShowAtPostopic.aspx">ShowAtPos</helplink> client method is used to display PopupMenu over the grid in response to a right mouse click instead of a client browser's standard context menu.
                    </p>
                    <p>
                    Note that in this demo, menu items are arranged into a logical group using their <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_GroupNametopic.aspx">GroupName</helplink> property. In this case, the items function as radio buttons - checking an item unchecks the one previously selected. So, only one menu item in a group can be checked at a time.
                    </p>
                ]]>
          </Description>
          <SourceFile>~/Models/PopulationAreaStructure.cs</SourceFile>
          <SourceFile>~/Views/Menu/PopupMenuGridViewPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Scrolling" Title="Scrolling" SeoTitle="Scrolling">
          <Description>
            <![CDATA[
                    <p>This demo illustrates the DevExpress MVC Menu’s ability to display scroll buttons for submenus whose content does not fit within the visible area. To describe the capabilities of the MVC Menu effectively, it is displayed within an IFRAME element thus simulating window boundaries.</p>
                    <p>By default, submenus are automatically rendered to accommodate their entire content. If a submenu contains a large number of items, it might not fit vertically in the visible area. This occurs when a submenu's height exceeds the browser window's height (or the height of an IFRAME containing the menu). In such instances, scroll buttons are needed within the submenus. If scroll buttons are enabled, a submenu that does not fit the visible area automatically adjusts its height to fit the area and displays scroll buttons, allowing submenu items to be scrolled vertically. To scroll, hover the mouse pointer over a scroll button or click it to scroll faster.</p>
                    <p>To enable scroll buttons for all submenus in a menu, set the menu's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettings_EnableSubMenuScrollingtopic.aspx">EnableSubMenuScrolling</helplink> property to true. To enable scroll buttons for specific submenus, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_EnableScrollingtopic.aspx">EnableScrolling</helplink> property of a submenu's parent menu item. You can customize the appearance of scroll buttons by providing custom images via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ScrollButtonStyletopic.aspx">ScrollButtonStyle</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ScrollDownButtonImagetopic.aspx">ScrollDownButtonImage</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ScrollUpButtonImagetopic.aspx">ScrollUpButtonImage</helplink> properties.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/Menu/ScrollingFrame.cshtml</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates" SeoTitle="Templates">
          <Description>
            <![CDATA[
            <p>
                This sample demonstrates the use of templates within the DevExpress MVC Menu.
            </p><p>
                A submenu template and an item template are used. These templates are assigned by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxMenuItem_SetSubMenuTemplateContenttopic.aspx">SetSubMenuTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxMenuItem_SetTemplateContenttopic.aspx">SetTemplateContent</helplink> methods of the Menu's item objects, respectively They contain a parameter that represents the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxMenuMenuItemTemplateContainertopic.aspx">MenuItemTemplateContainer</helplink> object providing settings for a templated item.                
            </p>]]>
          </Description>
          <SourceFile>~/Views/Menu/TemplatesItem.cshtml</SourceFile>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events" SeoTitle="Client-Side Events">
          <Description>
            <![CDATA[
             <p>
                This example demonstrates the capabilities of our client-side event technology. All client-side events exposed by the DevExpress MVC Menu are traced in this demo. Click any menu item or move the mouse pointer over the parent menu items within the menu to initiate client-side events.
            </p><p>
                The Menu provides advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client, and cover all key functional elements of the menu control. As such, they give you the ability to fully control the client-side behavior of the Menu.
            </p><p>
                Client-side event handlers represent code written in JavaScript. In order to handle a client-side event, the sender web control provides a property that accepts either handling code directly or the name of a handling function. This function must be defined directly in the page's HTML code or in a separate js file. For each client-side event, there is a specific object with both server and client-side representations. This object automatically renders the necessary JavaScript code to the page and assign it as a handler to the web control on the client side.
            </p>]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality" SeoTitle="Client-Side Functionality">
          <Description>
            <![CDATA[
            <p>
                This example demonstrates available ways to manipulate the DevExpress MVC Menu programmatically on the client using our extended client-side functionality. The client object of the Menu can be accessed on the client by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
            </p><p>
                In this demo, each Menu item is identified using its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_Nametopic.aspx">Name</helplink> property. In order to obtain a specific menu item by its name on the client, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_GetItemByNametopic.aspx">GetItemByName</helplink> method is used. A specific menu item can be selected using <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_SetSelectedItemtopic.aspx">SetSelectedItem</helplink>, by passing it the required item.
            </p><p>
                The <b>MenuItemClick</b> function that is a handler of the Menu's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_ItemClicktopic.aspx">ItemClick</helplink> client event demonstrates how to synchronize the dropdown editor's value with the name of the clicked menu item.
            </p>]]>
          </Description>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="NavBar" Title="NavBar" SeoTitle="ASP.NET MVC Navigation Pane Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
              <p>The DevExpress ASP.NET MVC NavBar extension is a navigation component that allows you to display a number of items arranged into different collapsible groups.</p>
              <p>To add a NavBar with a group containing multiple items to your web application, add the NavBar extension to the View, add the required group, and add the required items to this group:</p>
              <p>View code:</p>
              <code lang="html">
                @Html.DevExpress().NavBar(settings => {
                    settings.Name = "nbOverview";
                    settings.Groups.Add(group => {
                        group.Text = "Charts";
                        group.Items.Add("Stacked Bar", "", 
                          "~/Images/BarStacked.png");
                        group.Items.Add("3D Pie", "", "~/Images/Pie.png");
                        group.Items.Add("Overlapped Gantt", "", 
                          "~/Images/Gantt.png");
                    });
                }).GetHtml()
              </code>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8969" Title="Documentation" />
          <KeyFeature Name="Data Binding">
            <Description>
              <![CDATA[
             You can bind a NavBar to a data source so that your NavBar structure is retrieved from an XML file, a SiteMap or a hierarchical list.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="AJAX Support">
            <Description>
              <![CDATA[
             NavBar supports AJAX technology by implementing the ability to load the content of a group from the server via a callback, when the group is expanded.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Template Technology">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within NavBar, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for NavBar. This functionality, coupled with the ability to handle events on the client side, gives you full control over the navbar behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features" SeoTitle="Main Features">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the key features available to you within the DevExpress MVC NavBar Extension. Use the controls on the right to change individual property values and see the associated results within the NavBar.
            </p><p>
                In order to disable the expansion/collapse of groups within the NavBar, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AllowExpandingtopic.aspx">AllowExpanding</helplink> property should be set to false. To enable selection of NavBar items on the client side, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AllowSelectItemtopic.aspx">AllowSelectItem</helplink> property to true.
            </p><p>
                To force the MVC NavBar Extension to display only one expanded group at any point in time, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AutoCollapsetopic.aspx">AutoCollapse</helplink> property value should be set to true. This behavior emulates a SideBar control.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_EnableHotTracktopic.aspx">EnableHotTrack</helplink> property allows you to specify whether NavBar items and groups can visually respond to mouse hover events. By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SaveStateToCookiestopic.aspx">SaveStateToCookies</helplink> property, you can control whether information about the expansion state of groups is preserved between site visits.
            </p>]]>
          </Description>
        </Demo>
        <Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates how the DevExpress MVC NavBar can be bound to a Model passed to a View from the Controller. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarExtension_Bindtopic.aspx">Bind</helplink> method is used to bind the NavBar to the Model. Note that the NavBar can only be bound to hierarchal data sources, and as such, a Model object passed to the <b>Bind</b> method must support the <b>IHierarchicalEnumerable</b> interface.
            </p>
            <p>
                The MVC NavBar Extension ships with following data binding methods:
            </p>
            <ul>
              <li>Bind(object dataObject);</li>
              <li>BindToSiteMap(string fileName);</li>
              <li>BindToSiteMap(string fileName, bool showStartingNode);</li>
              <li>BindToXML(string fileName);</li>
              <li>BindToXML(string fileName, string xPath);</li>
            </ul>]]>
          </Description>
          <SourceFile>~/Models/Categories.cs</SourceFile>
        </Demo>
        <Demo Key="DataBindingToXML" Title="Data Binding to XML">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to easily populate the DevExpress MVC NavBar with group and item information taken from an xml file. The xml file has the following structure:
            </p><code lang="Xml">
                <Cameras>
                    <Brand Text="...">
                        <Camera Model="..." Pixels="..." NavigateUrl="..." ImageUrl="..." />
                        ...
                    </Brand>
                    ...
                </Cameras>
            </code><p>
                The MVC NavBar is able to automatically retrieve group and item information by binding to data fields whose names coincide with property names of a group and item objects (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_Texttopic.aspx">Text</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://documentation.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">ImageUrl</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_ToolTiptopic.aspx">ToolTip</helplink>). In this demo, the group text, and both the navigation location and image path of items are obtained automatically from the corresponding attributes of data source nodes. The texts used for individual items are composed dynamically by concatenating the values of the Model and Pixels attributes. This processing is performed within a delegate of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_ItemDataBoundtopic.aspx">ItemDataBound</helplink> method, which allows you to manipulate values being assigned to the properties of a NavBar item during data binding.
            </p>]]>
          </Description>
          <SourceFile>~/Views/NavBar/DataBindingToXMLPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Callbacks" Title="AJAX">
          <Description>
            <![CDATA[
            <p>
                This sample illustrates use of AJAX-based callbacks implemented by DevExpress MVC NavBar.
            </p><p>
                The MVC NavBar supports AJAX with the ability to load a group's content from the server via a callback when the group is expanded. This approach allows the NavBar to avoid the initial transfer of all group data to the client, thus improving page load times.
            </p><p>
                In order to activate use of callbacks, the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property should contain the path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view that only contains a NavBar.
            </p><p>
                In this sample, we momentarily pause callback processing on the server side, so that the Loading Panel is visible during processing.
            </p>]]>
          </Description>
          <SourceFile>~/Views/NavBar/CallbacksPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates">
          <Description>
            <![CDATA[
            <p>
                This sample demonstrates the use of templates within the DevExpress MVC NavBar.
            </p><p>
                Templates for the header, collapsed header and the content of a group are used in this demo. These templates are assigned by using the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SetGroupHeaderTemplateContenttopic.aspx">SetGroupHeaderTemplateContent</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SetGroupHeaderTemplateCollapsedContenttopic.aspx">SetGroupHeaderTemplateCollapsedContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SetGroupContentTemplateContenttopic.aspx">SetGroupContentTemplateContent</helplink> methods, respectively. These methods contain a parameter that represents the NavBarGroupTemplateContainer object, providing settings of a templated element.
            </p>]]>
          </Description>
          <SourceFile>~/Views/NavBar/TemplatesContent.cshtml</SourceFile>
          <SourceFile>~/Views/NavBar/TemplatesHeader.cshtml</SourceFile>
          <SourceFile>~/Views/NavBar/TemplatesHeaderCollapsed.cshtml</SourceFile>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events">
          <Description>
            <![CDATA[
            <p>
                This sample demonstrates the capabilities of our client-side event technology. All client-side events exposed by the DevExpress MVC NavBar are traced in this demo. Click any item or expand/collapse a group within the NavBar to initiate client-side events.
            </p><p>
                Client-side events are triggered in response to specific actions or events on the client side (in particular, to expanding/collapsing a group). Client-side event handlers represent code written in JavaScript. In order to handle a client-side event, the sender web control provides a property that accepts either handling code directly or the name of a handling function. This function should be defined directly in the page's HTML code or in a separate js file. For each client-side event, there is a specific object, which has both server-side and client-side representations. This object will automatically render the necessary JavaScript code to the page and assign it as a handler to the web control on the client side.                
            </p>]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality">
          <Description>
            <![CDATA[
            <p>
                This example demonstrates available ways to manipulate the DevExpress MVC NavBar programmatically on the client using our extended client-side functionality. The client object of the NavBar can be accessed on the client-side by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
            </p><p>
                In this demo, each NavBar group or item is identified using its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_Nametopic.aspx">Name</helplink> property. In order to obtain a specific group or item by its name on the client, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_GetGroupByNametopic.aspx">GetGroupByName</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_GetItemByNametopic.aspx">GetItemByName</helplink> method is used respectively. In this demo, the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AutoCollapsetopic.aspx">AutoCollapse</helplink> mode is enabled, specifying that only one group can be expanded within the NavBar at any one time. In this mode, a group's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBarGroup_SetExpandedtopic.aspx">SetExpanded</helplink> method can be used to expand the desired group.
            </p><p>
                A given NavBar item can be selected within each group via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_SetSelectedItemtopic.aspx">SetSelectedItem</helplink> method by passing it the required item.
            </p><p>
                The <b>GroupExpandedChanged</b> function that is a handler of the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_ExpandedChangedtopic.aspx">ExpandedChanged</helplink> event demonstrates how to synchronize values of the dropdown editors with the expanded group and the group's selected item, if any.
            </p>]]>
          </Description>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Ribbon" Title="Ribbon">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
            <p>The DevExpress ASP.NET MVC Ribbon extension helps you introduce the look, feel and behavior of a ribbon based UI in your application.</p>
            <p>To add a Ribbon to your web application, add the Ribbon extension to the View, and add the required tabs, groups and items.</p>
            <p>View code:</p>
            <code lang="html">
              @Html.DevExpress().Ribbon(settings => {
                  settings.Name = "ribbon";
                  var tab = settings.Tabs.Add("Home");
                  var tasksGroup = tab.Groups.Add("Tasks");
                  tasksGroup.Items.Add(MVCxRibbonItemType.ButtonItem, i => {
                      i.Text = "TasksList";
                      i.Name = "Tasks List";
                      i.Size = RibbonItemSize.Large;
                      ((RibbonButtonItem)i).LargeImage.IconID = 
                        IconID.TasksTask32x32;
                  });
                  tasksGroup.Items.Add(MVCxRibbonItemType.ButtonItem, i => {
                      i.Text = "New";
                      i.Name = "NewTask";
                      i.Size = RibbonItemSize.Small;
                      ((RibbonButtonItem)i).SmallImage.IconID = 
                        IconID.TasksNewtask16x16;
                  });
                  // And other groups with items
              }).GetHtml()
            </code>
        ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/watch?v=_NwilQhz16U" Title="Training Videos" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             You can bind a ribbon to a data source so that your ribbon structure is retrieved from an XML file, a SiteMap or a hierarchical list.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Responsive Layout">
            <Description>
              <![CDATA[
             The Ribbon extension has an adaptive layout, (i.e., the number of items is reduced and groups are collapsed when a ribbon has insufficient space.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Templates">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within Ribbon, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for Ribbon. This functionality, coupled with the ability to handle events on the client side, gives you full control over the Ribbon's behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features">
          <Description>
          <![CDATA[
            <p>This demo describes the features provided by the DevExpress Ribbon extension for ASP.NET MVC. Use the checkboxes in the upper panel to change individual property values and see the result in the ribbon. The descriptions of the properties utilized are listed below.</p>
            <ul>
            <li>Allow Minimize – specifies whether or not a ribbon can be minimized. When this functionality is disabled, the minimize button is not displayed.</li>
            <li>Show File Tab – specifies the file tab visibility.</li>
            <li>Show Tabs – specifies the tab header visibility.</li>
            <li>Show Group Labels – specifies the group label visibility.</li>
            </ul>
            <p>The ribbon is placed in the PopupControl window to demonstrate the ribbon’s responsive layout. Use the PopupControl's size grip to see this functionality in action.</p>
            <p>In this demo, the following client-side events are handled. (See the partial view code.)</p>
            <ul>
            <li>The <b>FileTabClicked</b> event is handled to flag that the file tab is clicked.</li>
            <li>The <b>CommandExecuted</b> event occurs after an end-user executes an action on a ribbon item (e.g., the end-user clicks a button or changes an editor value). The event is handled to display information about the item related to the event. The optional <b>parameter</b> event argument property provides additional information about the command being processed.</li>
            </ul>
          ]]>
          </Description>
          <SourceFile>~/Views/Ribbon/FeaturesPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="DataBinding" Title="Data Binding">
          <Description>
          <![CDATA[
            <p>This demo illustrates how to bind the <b>DevExpress ASP.NET MVC Ribbon</b> extension to a Model passed to a View from the Controller. The <b>Bind</b> method is used to bind a Ribbon to the Model. Note that the Ribbon extension can only be bound to hierarchal data sources, and as such, a Model object passed to the <b>Bind</b> method must support the <b>IHierarchicalEnumerable</b> interface. During binding, the ribbon automatically creates tabs, groups and items, and retrieves their property values from the corresponding data items.</p>
            <p>The Ribbon extension ships with the following data binding methods:</p>
            <ul>
                <li>Bind(object dataObject);</li>
                <li>BindToSiteMap(string fileName);</li>
                <li>BindToSiteMap(string fileName, bool showStartingNode);</li>
                <li>BindToXML(string fileName);</li>
                <li>BindToXML(string fileName, string xPath).</li>
            </ul>
            <p>You can specify the data source fields to which the tab, group and item properties are mapped using the <b>TabDataFields</b>, <b>GroupDataFields</b>, and <b>ItemDataFields</b> properties, respectively.</p>
            <p>Additionally, the Ribbon provides specific events related to data binding that can be handled according to your application logic.</p>
            <ul>
                <li><b>TabDataBound</b> – allows you to customize the settings of an individual tab immediately after it is bound to data.</li>
                <li><b>GroupDataBound</b> – allows you to customize the settings of an individual group immediately after it is bound to data.</li>
                <li><b>ItemDataBound</b> – allows you to customize the settings of an individual item immediately after it is bound to data.</li>
                <li><b>DataBound</b> – occurs after the extension data binding is complete, and allows you to customize the extension.</li>
            </ul>
            <p>
                In this demo, the Ribbon is bound to an XML file by passing the path to the file and the required XPath to the <b>BindToXML</b> method. The tab, group, and item property values are obtained automatically because the data item attributes are named according to the corresponding default property values.
            </p>
          ]]>
          </Description>
        </Demo>
        <Demo Key="Templates" Title="Templates">
          <Description>
          <![CDATA[
            <p>The <b>DevExpress ASP.NET MVC Ribbon</b> extension supports template technology, allowing you to customize an extension's appearance and layout.</p>
            <p>To modify the appearance of the default Ribbon extension elements, use a specific template that defines how a client browser will render elements. Ribbon allows you to create templates for two elements: file tab and item.</p>
            <p>In this demo, the <b>SetFileTabTemplateContent</b> method is used to replace tab text with an arrow image that invokes a popup menu. The content of a ribbon item is defined by its <b>SetContent</b> property.</p>
          ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events">
          <Description>
          <![CDATA[
            <p>This sample demonstrates the capabilities of our client-side event management technology. All available client-side events are traced in this demo. Play with the DevExpress ASP.NET MVC Ribbon extensions interface elements to initiate client-side events.</p>
            <p>The Ribbon extension provides advanced support for client-side events. Client-side events are triggered in response to specific actions or events on the client, and cover all the key elements of the Ribbon extension functionality.</p>
            <p>The following client events are available for Ribbon:
            </p>
            <ul>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRibbonScriptsASPxClientRibbon_ActiveTabChangedtopic">ActiveTabChanged</helplink> – fires after the active tab is changed.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRibbonScriptsASPxClientRibbon_FileTabClickedtopic">FileTabClicked</helplink> – fires after a file tab is clicked.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRibbonScriptsASPxClientRibbon_CommandExecutedtopic">CommandExecuted</helplink>  – occurs after an action is executed on a ribbon item (e.g., an end-user clicks a button or changes an editor value).</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> – occurs on the client side after the extension is initialized, but prior to its display in the browser.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRibbonScriptsASPxClientRibbon_MinimizationStateChangedtopic">MinimizationStateChanged</helplink> – occurs when the ribbon minimization state is changed.</li>
            </ul>
            <p>To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9150">Client-Side Events</helplink> help topic.</p>
          ]]>
          </Description>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Splitter" Title="Splitter" SeoTitle="ASP.NET MVC Splitter Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
              <p>The DevExpress ASP.NET MVC Splitter extension gives you the ability to split a web application screen into multiple sections or panels and optionally allow end-users to resize panels as their needs dictate.</p>
              <p>To add two resizable panes to your page, add the Splitter to the View and add two panes to the Splitter.</p>
              <p>View code:</p>
              <code lang="html">
                @Html.DevExpress().Splitter(settings => {
                    settings.Name = "splOverview";
                    settings.Panes.Add(pane => {
                        pane.SetContent(() => {
                            ViewContext.Writer.Write(
                                "<div>Left container</div>"
                            );
                        });
                    });
                    settings.Panes.Add(pane => {
                        pane.SetContent(() => {
                            ViewContext.Writer.Write(
                                "<div>Right container</div>"
                            );
                        });
                    });
                }).GetHtml()
              </code>
              <p>Splitter allows you to define the content of any of its panes.</p>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8972" Title="Documentation" />
          <KeyFeature Name="Resizing">
            <Description>
              <![CDATA[
             The Splitter Extension allows you to create sizable webpage content by embedding it into splitter panes.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Min and Max Size">
            <Description>
              <![CDATA[
             The Splitter extension allows you to set the maximum and minimum size of its panes.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Collapse and Expand">
            <Description>
              <![CDATA[
             The Splitter extension allows you to expand or collapse its panes. When the splitter pane is collapsed, it allows other pane content to be expanded for more convenience.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for Splitter. This functionality, coupled with the ability to handle events on the client side, gives you full control over the splitter behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Content URL">
            <Description>
              <![CDATA[
             Splitter allows you to display external web pages as the content of splitter panes.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Resizing" Title="Resizing" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Splitter.png" HighlightedTitle="Splitter - Resizing">
          <Description>
            <![CDATA[
                <p>
                    The DevExpress MVC Splitter Extension allows you to create sizable webpage content, 
                    by embedding them into splitter panes. In this demo, splitter panes contain a DevExpress 
                    MVC <b>Grid View</b>, <b>List Edit</b>, <b>Text Box</b>, and <b>Memo</b> Extensions. 
                    Splitter panes display separators and collapse buttons, allowing users to resize embedded extensions.
                </p>
                <p>                
                    Moving any splitter separator raises the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizedtopic.aspx">PaneResized</helplink> client event, 
                    which can be handled to modify the size of embedded extensions. 
                    In this demo, size adjustments are accomplished via the embedded control's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetWidthtopic.aspx">SetWidth</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetHeighttopic.aspx">SetHeight</helplink> methods.
                </p>
                ]]>
          </Description>
          <HighlightedDescription>The Splitter extension helps you organize web content by dividing it into multiple sections or panels. The Splitter also assists your end-users with customizing their views at runtime and resizing embedded extensions. This demo illustrates how the Splitter can contain other extension such as the Grid View, List Edit, Text Box and Memo, to help you with the layout.</HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Splitter/ResizingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Scrolling" Title="Scrolling">
          <Description>
            <![CDATA[
                <p>
                    During sizing operations, a splitter pane can be reduced so that its content no longer fits within the allocated region. 
                    The DevExpress MVC Splitter Extension allows you to display scroll bars within a pane to prevent content clipping, 
                    via the pane's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterSplitterPane_ScrollBarstopic.aspx">ScrollBars</helplink> property. The following options are available to you when using scroll bars:
                </p>
                    <ul>
                    <li>
                        <b>None</b>. Scrollbars are no available.
                    </li>
                    <li>
                        <b>Horizontal</b>. Only a horizontal scroll bar is available within the splitter pane.
                    </li>
                    <li>
                        <b>Vertical</b>. Only a vertical scroll bar is available within the splitter pane.
                    </li>
                    <li>
                        <b>Both</b>. Both vertical and horizontal scroll bars are visible within the splitter pane.
                    </li>
                    <li>
                        <b>Auto</b>. The splitter automatically displays a horizontal or/and vertical scroll bar within the 
                        splitter pane, depending upon the pane's content.
                    </li>
                    </ul>
                <p>
                    In this demo, the splitter contains two panes. The left pane displays only a vertical scroll bar 
                    (the <b>ScrollBar</b> property is set to <b>Vertical</b>), the second pane's scroll bars are displayed automatically 
                    (the <b>ScrollBar</b> property is set to <b>Auto</b>). 
                    To see how scroll bars work in this demo, start sizing panes using the splitter separator.                    
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="FullscreenMode" Title="Fullscreen Mode">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates how to use the Splitter extension for ASP.NET MVC in full-screen mode, when a control fills an entire page and can be resized together with the browser window. To enable this mode, set the corresponding setting to true, as shown below.
                </p>
                <code lang="Html">
                    Html.DevExpress().Splitter(
                        settings =>
                        {
                            ...
                            settings.FullscreenMode = true;
                            ...
                        }
                </code>
                ]]>
          </Description>
          <SourceFile>~/Views/Splitter/FullscreenModePage.cshtml</SourceFile>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates the capabilities of our client-side event technology. 
                    All client-side events available in the DevExpress MVC Splitter Extension are traced in the demo. 
                    To trigger these events, start to resize panes or collapse/expand them. 
                    In this demo, you can toggle options to specify whether corresponding client-side events are traced.
                </p>
                <p>
                    Client-side events are triggered in response to specific user actions performed on the client side 
                    (in particular, when sizing panes or toggling their collapsed state). 
                    Client-side event handlers represent code written in JavaScript. 
                    In order to handle a client-side event, the sender web control provides a property that accepts 
                    either code handling directly, or the name of a handling function. 
                    This function must be defined either directly in the page's HTML code or in a separate js file. 
                    For each client-side event, there is a specific object, which has both server-side and client-side representations. 
                    This object will automatically render the necessary JavaScript code to the page, and assign it as 
                    the handler to the web control on the client side.                
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates how to manipulate the DevExpress MVC Splitter programmatically on the client using 
                    our extended client-side functionality. An individual client control object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
                </p>
                <p>                    
                    In this demo, the splitter's visibility and size (the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSplitterSettings_AllowResizetopic.aspx">AllowResize</helplink> property) 
                    settings can be toggled on the client via corresponding options. Option values are passed as a parameter to the 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetVisibletopic.aspx">SetVisible</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_SetAllowResizetopic.aspx">SetAllowResize</helplink> client methods. 
                    You can expand or collapse splitter panes by using a button whose caption is changed automatically depending upon the action 
                    (see the <b>UpdateButtonState</b> function). 
                    On the client side, the button's functionality is based on a pane's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_Expandtopic.aspx">Expand</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_Collapsetopic.aspx">Collapse</helplink> methods.
                </p>
                <p>
                    You can also change a splitter pane's content and width via the pane's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_SetContentUrltopic.aspx">SetContentUrl</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_SetSizetopic.aspx">SetSize</helplink> 
                    client methods.
                </p>                
                ]]>
          </Description>
          <SourceFile>~/Views/Splitter/SamplePage1.cshtml</SourceFile>
          <SourceFile>~/Views/Splitter/SamplePage2.cshtml</SourceFile>
          <SourceFile>~/Views/Splitter/SamplePage3.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="TabControl" Title="Tab Strip" SeoTitle="ASP.NET MVC Tab Panel Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC Tab-Page Strip is an effective solution for creating tabbed interfaces that allow end-users to navigate through different pages.</p>
                <p>To add tabs to your web application, define the TabControl extension within the View and add the required tabs within the settings.</p>
                <p>View code:</p>
                <code lang="html">
                @Html.DevExpress().TabControl(settings => {
                    settings.Name = "tcOverview";
                    settings.Tabs.Add("Home");
                    settings.Tabs.Add("Products");
                    settings.Tabs.Add("Support");
                    settings.Tabs.Add("Downloads");
                }).GetHtml()
              </code>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8973" Title="Documentation" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             You can bind a TabControl to a data source so that your tabs are retrieved from an XML file or a hierarchical list.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Loading Content via AJAX">
            <Description>
              <![CDATA[
             PageControl can load the content of popup windows on demand.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Tab Scrolling">
            <Description>
              <![CDATA[
             If the Tab Strip size does not allow all tabs to be visible within the tab header at one time, scroll buttons are displayed, allowing end-users to scroll tabs.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Templates">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within TabControl, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
              A comprehensive client-side API is available for TabControl. This functionality, which is then coupled with the ability to handle events on the client side, gives you full control over the TabControl behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features">
          <Description>
            <![CDATA[
                <p>
                    This demo describes some of the features available to you when using the DevExpress MVC Tab Extension.
                </p>
                <p>
                    Tab position (Left, Right, Top, Bottom) can be defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabPositiontopic.aspx">TabPosition</helplink> property. 
                    In order to align tabs in the defined position, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabAligntopic.aspx">TabAlign</helplink> property. 
                    When tabs are positioned to the left or right of the control, TabAlign defines their vertical alignment. 
                    In this instance, the Left value is treated as Top, and the Right value is always treated as Bottom.
                </p>
                <p>
                    The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_EnableHotTracktopic.aspx">EnableHotTrack</helplink> property allows you to specify whether tabs can visually respond to mouse hover events.
                </p>
                <p>
                    By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_SaveStateToCookiestopic.aspx">SaveStateToCookies</helplink> property, you can control whether information about the active tab 
                    is preserved between site visits.
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="DataBindingToXML" Title="Data Binding to XML">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to populate the DevExpress MVC Tab Extension 
                    with information taken from an xml file. The xml file has the following structure:
                </p>
                <code lang="Xml">
                <Products>
                    <Product name="..." text="..." id="..." />
                    ...
                </Products>
                </code>                
                <p>
                    MVC Tab Extension provides the following binding methods:
                </p>
                <ul>
                    <li>
                        Bind(object dataObject);
                    </li>
                    <li>
                        BindToSiteMap(string fileName);
                    </li>
                    <li>
                        BindToSiteMap(string fileName, bool showStartingNode);
                    </li>
                    <li>
                        BindToXML(string fileName);
                    </li>
                    <li>
                        BindToXML(string fileName, string xPath);
                    </li>
                </ul>
                <p>
                   The MVC Tab Extension implements specific properties that point to the data fields containing the necessary data. 
                   These are the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_NameFieldtopic.aspx">NameField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_NavigateUrlFieldtopic.aspx">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_TabImageUrlFieldtopic.aspx">TabImageUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_ActiveTabImageUrlFieldtopic.aspx">ActiveTabImageUrlField</helplink>, 
                   <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_TextFieldtopic.aspx">TextField</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_ToolTipFieldtopic.aspx">ToolTipField</helplink> properties. 
                   If these properties are not defined, the MVC Tab Extension is able to automatically bind to data fields whose 
                   names coincide with property names of a tab object (such as the 
                   <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_Nametopic.aspx">Name</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTab_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">TabImageUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">ActiveTabImageUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_Texttopic.aspx">Text</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_ToolTiptopic.aspx">ToolTip</helplink>).
                </p>
                <p>
                    In this demo, tab navigation locations are generated by formatting values of the 'id' data field. 
                    The 'id' data field is specified by the <b>NavigateUrlField</b> property, and a format string is defined 
                    via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_NavigateUrlFormatStringtopic.aspx">NavigateUrlFormatString</helplink> property.
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="Callbacks" Title="AJAX">
          <Description>
            <![CDATA[
                <p>
                    This sample illustrates use of the AJAX-based callbacks implemented by the DevExpress MVC Tab Extension.
                </p>
                <p>
                    The Tab Extension supports AJAX with the ability to load a tab’s content from the server via a callback when the tab becomes active. 
                    This approach allows the Tab Extension to avoid the initial transfer of all its inactive pages, thus improving page load times.
                </p>
                <p>
                    In order to activate the use of callbacks, the Tab Extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property should contain the 
                    path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view 
                    that only contains a Tab Extension.
                </p>
                <p>
                    In this sample, we momentarily pause callback processing on the server side, so that the 
                    Loading Panel is visible during processing.
                </p>
                ]]>
          </Description>
          <SourceFile>~/Views/TabControl/CallbacksPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Scrolling" Title="Tab Scrolling">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates the DevExpress MVC Tab Extension’s support for scroll buttons within its tab header. 
                    To enable tab scrolling, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_EnableTabScrollingtopic.aspx">EnableTabScrolling</helplink> property to <b>true</b>. 
                    Once set, if the control's size doesn't allow all tabs to be displayed within the tab header simultaneously, 
                    scroll buttons are appear allowing end-users to scroll tabs. 
                    Scroll button position can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabAligntopic.aspx">TabAlign</helplink> property.                     
                </p>
                <p>
                    Note that tab scrolling is only available when the tab header is positioned on the control's top or bottom - 
                    the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabPositiontopic.aspx">TabPosition</helplink> property is set to <b>TabPostition.Top</b> or <b>TabPosition.Bottom</b>.
                </p>                
                ]]>
          </Description>
        </Demo>
        <Demo Key="Templates" Title="Templates">
          <Description>
            <![CDATA[
                <p>
                    This sample demonstrates the use templates within the DevExpress MVC Tab Extension.
                </p>
                <p>
                    A tab template and an active tab template are used in this demo. 
                    These templates are assigned by using the Tab Extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_SetTabTemplateContenttopic.aspx">SetTabTemplateContent</helplink> and 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_SetActiveTabTemplateContenttopic.aspx">SetActiveTabTemplateContent</helplink> methods, respectively. 
                    These methods contain a parameter that represents the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxTabControlTabControlTemplateContainertopic.aspx">TabTemplateContainer</helplink> object, 
                    providing settings for a templated tab object.                    
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events">
          <Description>
            <![CDATA[
                <p>
                    This sample demonstrates the capabilities of our client-side event technology. 
                    All client-side events exposed by the DevExpress MVC Tab Extension are traced in this demo. 
                    Click an inactive tab to initiate client-side events.                    
                </p>
                <p>
                    Client-side events are triggered in response to specific actions or events on the client side 
                    (in particular, to an active tab change). Client-side event handlers represent code written in JavaScript. 
                    In order to handle a client-side event, the sender web control provides a property that accepts either handling 
                    code directly or the name of a handling function. 
                    This function must be defined either directly in the page's HTML code or in a separate js file. 
                    For each client-side event, there is a specific object, which has both server-side and client-side representations. 
                    This object will automatically render the necessary JavaScript code to the page and assign it as a 
                    handler to the web control on the client side.
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality">
          <Description>
            <![CDATA[
                <p>
                    This example demonstrates available ways to manipulate the DevExpress MVC Tab Extension programmatically 
                    on the client using enhanced client-side functionality. 
                    The client object of the Tab Extension can be accessed on the client-side by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
                </p>
                <p>
                    The Tab Extension allows a tab’s content to be changed dynamically on the client side  by using the 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientPageControl_SetTabContentHTMLtopic.aspx">SetTabContentHTML</helplink> method. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_GetActiveTabtopic.aspx">GetActiveTab</helplink> method can be used to access the currently active tab.
                </p>
                <p>
                    The <b>ShowTabContent</b> function displays (in a specific text region) the HTML code which represents 
                    the active tab’s content. The content of the active tab is obtained via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientPageControl_GetTabContentHTMLtopic.aspx">GetTabContentHTML</helplink> method.
                </p>
                <p>
                    The <b>ActiveTabChanged</b> function represents the hander for the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_ActiveTabChangedtopic.aspx">ActiveTabChanged</helplink> client event. 
                    The event's argument contains information on the active tab which is used to synchronize the value of the dropdown editor.
                </p>
                <p>
                    A tab can be activated by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_SetActiveTabtopic.aspx">SetActiveTab</helplink> method. 
                    In this demo, each tab is identified using its server-side <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_Nametopic.aspx">Name</helplink> property. 
                    In order to obtain a specific tab by its name on the client side, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_GetTabByNametopic.aspx">GetTabByName</helplink> method is used.
                </p>
                ]]>
          </Description>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="TreeView" Title="TreeView" SeoTitle="ASP.NET MVC Tree View Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
              <p>The DevExpress ASP.NET MVC TreeView extension assists web navigation by displaying a hierarchical list of items (nodes) such as folders. Nodes in a TreeView can be expanded and collapsed to display other sub-items.</p>
              <p>To add a tree-like menu to your web application, add the TreeView extension to the View, and add the required tree nodes and their respective child nodes:</p>
              <p>View code:</p>
              <code lang="html">
                @Html.DevExpress().TreeView(settings => {
                    settings.Name = "tvOverview";
                    settings.Nodes.Add(node => {
                        node.Text = "Music";
                        node.Expanded = true;
                        node.Image.Url = "~/Images/music.png";
                        node.Nodes.Add(subNode => {
                            subNode.Text = "Andy McKee";
                            subNode.Nodes.Add("Rylynn");
                            subNode.Nodes.Add("Drifting");
                        });
                    });
                    // And other nodes
                }).GetHtml()
              </code>
            ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8974" Title="Documentation" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             You can bind a TreeView to a data source so that your tree structure is retrieved from an XML file, a SiteMap or a hierarchical list.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="AJAX Support">
            <Description>
              <![CDATA[
             TreeView supports AJAX technology by implementing the ability to load child nodes from the server via a callback when the node is expanded.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Virtual Mode">
            <Description>
              <![CDATA[
             In this mode, a tree is created on demand (i.e., child nodes are created and initialized when their parent node is expanded).
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Template Technology">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within TreeView, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for TreeView. This functionality, coupled with the ability to handle events on the client side, gives you full control over the TreeView behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/TreeView.png" HighlightedTitle="Tree View - Features">
          <Description>
            <![CDATA[
                <p>This demo illustrates the key features of the DevExpress MVC TreeView. Use the options in the right panel to change values of corresponding TreeView settings and view result of your changes within the TreeView.</p>
                <p>Property Descriptions:</p>
                <ul>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_AllowSelectNodetopic.aspx">AllowSelectNode</helplink> - Activates node selection. If this option is enabled, clicking a node selects it. Only one node can be selected at a time.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_EnableAnimationtopic.aspx">EnableAnimation</helplink> - Specifies whether nodes are expanded/collapsed with animation effects.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_EnableHotTracktopic.aspx">EnableHotTrack</helplink> - Specifies whether nodes are hot-tracked when the mouse pointer is positioned over them.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ShowTreeLinestopic.aspx">ShowTreeLines</helplink> - Toggles tree line visbility.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ShowExpandButtonstopic.aspx">ShowExpandButtons</helplink> - Toggles the visibility of expand buttons. End-users can always expand or collapse nodes by double-clicking them.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_AllowCheckNodestopic.aspx">AllowCheckNodes</helplink> - Specifies whether end-users can check nodes using corresponding check boxes. Disabling thgis option hides check boxes.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_CheckNodesRecursivetopic.aspx">CheckNodesRecursive</helplink> - If node checking is enabled, use this option to allow end-users to recursively check nodes. In this mode, checking a node automatically checks all its immediate child nodes and vice versa.</li>
                </ul>
                ]]>
          </Description>
          <HighlightedDescription>A Tree View extension is very helpful for web navigation, because it displays a hierarchical list of items, such as folders. Items in a Tree View can be expanded and collapsed to display other sub-items. Take a look at this demo's illustration of the main features of the Tree View extension.</HighlightedDescription>
        </Demo>
        <Demo Key="DataBindingToXML" Title="Data Binding to XML">
          <Description>
            <![CDATA[
                <p>This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to populate the DevExpress MVC TreeView with node information taken from an xml file. The source XML file contains hierarchical information about a set of classes and their members (properties, methods, events).</p>
                <p>The MVC TreeView ships with the following data binding methods:</p>
                <ul>
                    <li>Bind(object dataObject);</li>
                    <li>BindToSiteMap(string fileName);</li>
                    <li>BindToSiteMap(string fileName, bool showStartingNode);</li>
                    <li>BindToXML(string fileName);</li>
                    <li>BindToXML(string fileName, string xPath);</li>
                    <li>BindToXML(string fileName, string xPath, string transformFileName);</li>
                </ul>
                <p>TreeView implements specific properties that point to the data fields containing necessary data. These are the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_TextFieldtopic.aspx">TextField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ImageUrlFieldtopic.aspx">ImageUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_NavigateUrlFieldtopic.aspx">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_NameFieldtopic.aspx">NameField</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ToolTipFieldtopic.aspx">ToolTipField</helplink> properties. If these properties are not defined, the TreeView is able to automatically bind to data fields whose names coincide with property names of a <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebMvcMVCxTreeViewNodetopic.aspx">MVCxTreeViewNode</helplink> object (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_Texttopic.aspx">Text</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">ImageUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_Nametopic.aspx">Name</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_ToolTiptopic.aspx">ToolTip</helplink>).</p>
                <p>In this demo, the <b>TextField</b>, <b>ImageUrlField</b>, and <b>NavigateUrlField</b> properties are used to specify the names of data item attributes from which corresponding node settings are obtained. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_NodeDataBoundtopic.aspx">NodeDataBound</helplink> property is used to define a delegated method, changing the text style of nodes which represent classes (text is displayed in bold).</p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="Callbacks" Title="AJAX">
          <Description>
            <![CDATA[
                <p>This sample demonstrates the use of the AJAX-based callbacks implemented by the DevExpress MVC TreeView.</p>
                <p>The MVC TreeView supports AJAX with the ability to load the content of parent nodes from the server via callbacks. This approach allows the TreeView to avoid the initial transfer of all node data to the client, thus improving page load times.</p>
                <p>In order to activate use of callbacks, the TreeViews's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property should contain the path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view that only contains a TreeView. In this instance, the contents of the collapsed nodes are not represented on the client. When a parent node is expanded for the first time, its content is retrieved from the server and then cached on the client. The next time the node is expanded, its content is taken from the client and no callback to the server is performed.</p>
                <p>In this example, we momentarily pause callback processing on the server side, so that the Loading Panel is visible during processing.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/TreeView/CallbacksPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates">
          <Description>
            <![CDATA[
                <p>This sample demonstrates the use of templates within the DevExpress MVC TreeView.</p>
                <p>Templates for the content of parent nodes and the child nodes are used in this demo. These templates are assigned by using the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_SetNodeTemplateContenttopic.aspx">SetNodeTemplateContent</helplink> method. This method contains a parameter that represents the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxTreeViewTreeViewNodeTemplateContainertopic.aspx">TreeViewNodeTemplateContainer</helplink> object, providing settings of a templated element.</p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="VirtualMode" Title="Virtual Mode">
          <Description>
            <![CDATA[
                <p>In addition to bound and unbound modes, the TreeView extension can operate in a Virtual Mode, which greatly reduces both the server load and start-up time when working with complex or dynamically created data. In a virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded. </p>
                <p>To implement a virtual mode for the TreeView extension, you should use a specifically parameterized <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewExtension_BindToVirtualDatatopic.aspx">BindToVirtualData</helplink> method. The method's parameter refers to the delegate method that can be declared as a static method within a model class. Within this delegate method, create a list of business objects that correspond to the child nodes owned by the processed node.</p>
                <p>In this demo, the TreeView extension uses this data binding method to display the file/folder tree of this demo's website.</p>
                ]]>
          </Description>
          <SourceFile>~/Models/VirtualMode/TreeViewVirtualModeHelper.cs</SourceFile>
          <SourceFile>~/Views/TreeView/VirtualModePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events">
          <Description>
            <![CDATA[
                <p>This demo traces all client-side events available in the DevExpress MVC TreeView.</p>
                <p>Client-side events are triggered in response to specific user actions performed on the client side (in particular, when clicking nodes or changing their expanded state). Client-side event handlers represent code written in JavaScript. In order to handle a client-side event, a property is provided via ClientSideEvents, accepting either code handling directly or the name of a handling function.</p>
                <p>In this demo, the following client events are traced by default:</p>
                <ul>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic.aspx">Init</helplink>. Occurs after the TreeView has been initialized, but prior to it being displayed within the browser.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangingtopic.aspx">ExpandedChanging</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic.aspx">ExpandedChanged</helplink>. Fires before and after a node's expansion state has been changed.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic.aspx">CheckedChanged</helplink>. Fires after a node's checked state has been changed.</li>
                    <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_NodeClicktopic.aspx">NodeClick</helplink>. Fires after a node has been clicked.</li>
                </ul>
                <p>You can toggle options to specify whether corresponding client-side events are traced.</p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality">
          <Description>
            <![CDATA[
                <p>This demo describes how you can  manipulate the DevExpress MVC TreeView programmatically on the client, using extended client-side functionality.</p>
                <p>The client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_EnableClientSideAPItopic.aspx">EnableClientSideAPI</helplink> property is set to true or if there is a handler assigned to any client-side event. Once set, an individual client control object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>. In the demo, the MVC TreeView’s client-side API is used to do the following:</p>
                <ul>
                    <li>Toggle the visibility of the TreeView via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetVisibletopic.aspx">SetVisible</helplink> client method.</li>
                    <li>Synchronize the currently selected TreeView node with the combo box, providing a list of nodes via the TreeView’s <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_NodeClicktopic.aspx">NodeClick</helplink> client event handler.</li>
                    <li>Display node properties and synchronize them with corresponding options displayed within the right-hand panel. Nodes are identified using names assigned via the corresponding property. A node's client object is accessed via the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_GetNodeByNametopic.aspx">GetNodeByName</helplink> client method. To change a TreeView’s node state, the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_SetSelectedNodetopic.aspx">SetSelectedNode</helplink> option values in response to expanded and checked state changes via the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic.aspx">ExpandedChanged</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic.aspx">CheckedChanged</helplink> client event handlers. client method and the node's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetEnabledtopic.aspx">SetEnabled</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetVisibletopic.aspx">SetVisible</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetCheckedtopic.aspx">SetChecked</helplink>, or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetExpandedtopic.aspx">SetExpanded</helplink> client methods are used.</li>
                    <li>Update option values in response to expanded and checked state changes via the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic.aspx">ExpandedChanged</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic.aspx">CheckedChanged</helplink> client event handlers.</li>
                </ul>
                ]]>
          </Description>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="Scheduler" Url="MVCxSchedulerDemos" Title="ASP.NET MVC Scheduler" SeoTitle="ASP.NET MVC Scheduler" IE7CompatModeRequired="true" NavItemTitle="Scheduling" OrderIndex="5" IsMvc="true">
      <Keywords>appointment</Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument11431
      </DocUrl>

      <IntegrationImageUrl>~/Content/Scheduler.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Scheduler Extension">
        <BannerTitle>
          MS Office&#174; Style Calendar and Scheduling Extensions for ASP.NET
        </BannerTitle>
        <BannerText>
          Deliver Microsoft Outlook-inspired schedulers and calendars with built-in printing support
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://go.devexpress.com/DevExpress_AspDemos_ASPxScheduler_Video.aspx</BannerUrl>
        <DescriptionTitle>
          Welcome to the online demo site of the ASP.NET MVC Scheduler Extension
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASP.NET MVC Scheduler Extension</b>. These features include:</p>
          ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <DescriptionTitle>About Scheduling</DescriptionTitle>
        <Description>
          <![CDATA[
              <p>
                  The code samples demonstrate the minimum amount of code required to add the Scheduler extension to your project.
              </p>
              <p>
                  The Scheduler updates itself via callbacks. You have to define the Scheduler extension in a separate Partial View and use the CallbackRouteValues property to specify the Controller and an Action which will handle callbacks.
              </p>
              <p>
              The SchedulerSettings in the view is used to set the initial Scheduler settings and specify the appointment storage that holds appointment data. To keep this example simple, appointment modifications are not allowed. 
              </p>
              <p>
              Partial View code:
              </p>
              <code lang="html">
                @using DevExpress.XtraScheduler;
                @Html.DevExpress().Scheduler(settings => {
                    settings.Name = "scheduler";
                    settings.CallbackRouteValues = new { 
                      Controller = "Overview", Action = "OverviewPartial" };
                    settings.Start = new DateTime(2010, 7, 14);
                    settings.Storage.Appointments.Assign(
                      AppointmentHelper.CreateStorage()); 
                    settings.Views.TimelineView.Enabled = false;
                    settings.Views.WorkWeekView.Enabled = false;
                    SchedulerOptionsCustomization options = 
                      settings.OptionsCustomization;
                    options.AllowAppointmentCreate = UsedAppointmentType.None;
                    options.AllowAppointmentEdit = UsedAppointmentType.None;
                    options.AllowAppointmentDelete = UsedAppointmentType.None;
                }).Bind(Model).GetHtml()
              </code>
              <br />
              <p>
              The Controller code implements the action that will handle the callbacks ("OverviewPartial" in the code sample below).
              </p>
              <p>
              Controller code:
              </p>
              <code lang="CSharp">
                public class HomeController: Controller {
                  public ActionResult Index() {
                    return View("Overview", AppointmentHelper.GetData());
                  }
                  public ActionResult OverviewPartial() {
                    return PartialView("OverviewPartial", 
                      AppointmentHelper.GetData());
                  }
                }
              </code>
              <br/>
              <p>
              The AppointmentHelper is the helper class that incorporates the logic required to get appointments from the data source. You have to create an appointment storage, define mappings between data fields and appointment properties and get the data from the data source. Once the storage is bound to data in the View, the Scheduler can display appointments.
              </p>
              <p>
              AppointmentHelper code:
              </p>
              <code lang="CSharp">
                public class AppointmentHelper {
                  public static IEnumerable GetData() {
                    CarsDataContext DB = new CarsDataContext();
                    return from schedule in DB.CarSchedulings select schedule;
                  }
                  public static MVCxAppointmentStorage CreateStorage() {
                    MVCxAppointmentStorage appStorage = 
                      new MVCxAppointmentStorage();
                    appStorage.Mappings.AppointmentId = "ID";
                    appStorage.Mappings.Start = "StartTime";
                    appStorage.Mappings.End = "EndTime";
                    appStorage.Mappings.Subject = "Subject";
                    appStorage.Mappings.Description = "Description";
                    appStorage.Mappings.Type = "EventType";
                    appStorage.Mappings.RecurrenceInfo = "RecurrenceInfo";
                    appStorage.Mappings.Label = "Label";
                    appStorage.Mappings.Status = "Status";
                    return appStorage;
                  }
                }
              </code>
            ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11536" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/playlist?list=PL8h4jt35t1wgBsUKjOXbQbrlEA99lY8RT" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11431" Title="Documentation" />
      <KeyFeature Name="Multiple View Types for Efficient Data Representation">
        <Description>
          <![CDATA[
             The Scheduler includes views for a detailed picture of events across one or more days, for any given weekly period and across multiple weeks. Events can be arranged across horizontal timelines. Multiple resource mode allows end-users to browse multiple schedules simultaneously.
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Built-in Event Management, Recurrence and Reminders">
        <Description>
          <![CDATA[
             All appointment dialogs are ready to use and can be fully customized and extended. Built-in dialogs, objects and methods handle recurring event chains. You can set a reminder for any event. 
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Extended Date Selection with Date Navigator">
        <Description>
          <![CDATA[
             Like Microsoft Outlook, the Date Navigator Control provides an intuitive way with which to select dates.
            ]]>
        </Description>
      </KeyFeature>
      <KeyFeature Name="Data Binding, Import, Export">
        <Description>
          <![CDATA[
             The Scheduler can be used in a databound mode with external data sources. The support for iCalendar RFC 2445 standard allows you to exchange scheduling data between your application and other calendars.
            ]]>
        </Description>
       </KeyFeature>
       <KeyFeature Name="Printing">
        <Description>
          <![CDATA[
          Scheduler Reports give you the ability to print a schedule or export your calendar in PDF and various graphic formats. You can design your schedule's appearance for the printed page.
            ]]>
        </Description>
       </KeyFeature>
           <KeyFeature Name="Time Zone Support">
       <Description>
          <![CDATA[
          All time-dependent data can be stored translated to UTC and displayed according to the client time zone. The Day View can display multiple time rulers with different time zone settings.
            ]]>
        </Description>
      </KeyFeature>
      </Overview>

      <DemoGroup Key="Features" Title="Features">
        <Demo Key="Grouping" Title="Grouping" SeoTitle="Grouping" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Grouping.png" >
          <Description>
            <![CDATA[
          <p>
          The DevExpress MVC Scheduler allows you to group appointments by resources or dates. Date value or resource caption is displayed in the column heading.
        </p><p>
          To navigate through resources and change the number of visible resources, use the built-in Resource Navigator  (buttons with arrows, plus and minus signs, and a drop-down list of resources), which is shown on the top of the scheduler.
        </p><p>
          Set the <b>SchedulerSettings.GroupType</b> option to <b>SchedulerGroupType.Resource</b> or to the <b>SchedulerGroupType.Date</b> value to enable grouping.
        </p><p>
        <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
        </p>]]>
          </Description>
          <HighlightedDescription>
            Browse multiple schedules simultaneously. When grouped by resources, the scheduler will display several parallel timelines. One appointment can be assigned to multiple resources.
          </HighlightedDescription>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/Features/GroupingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Editing" Title="Editing" SeoTitle="Editing" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Editing.png" >
          <Description>
            <![CDATA[
            <p>
            This demo illustrates appointment editing options available to you when using the DevExpress MVC Scheduler.
            </p><p>
            Double click an appointment to invoke a simple editor that allows editing appointment subject in inline mode. Right-click an appointment and select <b>Open</b> to invoke the standard appointment editing form. To create a new appointment, select time cells, right-click  and select an appropriate menu item to display the appointment editing form.
            </p><p>
            Insert, update and delete operations for appointment are implemented in the <b>SchedulerDataHelper</b> class of the demo application. The implementation is dependent on the data model chosen and reflects its specifics.
            </p>]]>
          </Description>
          <HighlightedDescription>
            Edit an appointment with ready-to-use dialog without writing a single line of code.  Built-in dialogs are also provided for handling recurring event chains.
          </HighlightedDescription>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/Features/EditingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ICalendar" Title="iCalendar" SeoTitle="iCalendar">
          <Description>
            <![CDATA[
            <p>
             The DevExpress MVC Scheduler allows you to exchange scheduling data between your application and the most popular calendars. Appointments can be saved to .ics file and loaded from a stream containing data in iCalendar format.
            </p><p>
            The SchedulerExtension provides you with <b>ExportToICalendar</b> and <b>ImportFromICalendar</b> methods allowing you to save and load iCalendar data with ease. 
            </p><p>
            <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Models/SchedulerDemoHelper.cs</SourceFile>
          <SourceFile>~/Views/Features/ICalendarPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="TimeZones" Title="Time Zones" SeoTitle="Time Zones">
          <Description>
            <![CDATA[
            <p>
            The DevExpress MVC Scheduler allows you to specify a client time zone that is different from the time zone in which a server is located. This demo shows multiple time rulers in the Day View.
            </p><p>
            Each time ruler displays the time using a specific time zone.
            </p>
            <ul>
            <li>
            The first time ruler uses GMT (Greenwich Mean Time)
            </li>
        <li>The second time ruler uses server time
            </li>
            <li>
            The third time ruler uses client time, which can be changed in the drop-down box at the top of the page
            </li>
            </ul>
            <p>
            <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
            </p>]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/Features/TimeZonesPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Reminders" Title="Reminders" SeoTitle="Reminders">
          <Description>
            <![CDATA[
            <p>
            The DevExpress MVC Scheduler allows you to easily set up a reminder for an appointment. Click "Create appointment with reminder" button to create an appointment with a reminder due in 5 minutes time. Then, a reminder alert window will be invoked to provide a notification about the event.
            </p><p>
            The appointment's <b>HasReminder</b> property is used to add a reminder to an appointment. The <b>Reminder</b> property provides accesss to the reminder and allows changing its characteristics. 
            </p>]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/Features/RemindersPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Customization" Title="Customization">
        <Demo Key="CustomForms" Title="Custom Forms" SeoTitle="Custom Forms">
          <Description>
            <![CDATA[
          <p>
          The DevExpress MVC Scheduler allows you to easily substitute default dialogs with custom forms tailored to suit your requirements. This demo illustrates how to invoke a custom appointment editing form and to display a custom inline editing form.
          </p><p>
          Double-click an appointment for inline editing form. Right-click an appointment and select <b>Open</b> to show a custom appointment editing form. Note that this form allows you to edit custom appointment properties obtained via custom mappings (Price and Contact Information).
          </p><p>
          The <b>SchedulerSettings.OptionsForms</b> property allows access to the MVCxSchedulerOptionsForms object which provides you with methods such as the <b>SetAppointmentFormTemplateContent</b> and the <b>SetAppointmentInplaceEditorFormTemplateContent</b>. You can implement partial views which represent custom forms, render and pass them to these methods.
          </p>
            ]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Models/SchedulerDemoHelper.cs</SourceFile>
          <SourceFile>~/Views/Customization/CustomFormsPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Customization/CustomAppointmentFormPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Customization/CustomInplaceEditorFormPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates" SeoTitle="Templates">
          <Description>
            <![CDATA[
          <p>
          The DevExpress MVC Scheduler allows you to easily customize the appearance of visual elements by providing custom templates.
          </p><p>
In this demo the <b>SetVerticalAppointmentTemplateContent</b> and the <b>SetHorizontalAppointmentTemplateContent</b> methods are used to specify custom appointment templates. The <b>SetHorizontalResourceHeaderTemplateContent</b> method enables you to include a picture in the resource header.
          </p><p>
          <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
          </p>]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/Customization/TemplatesPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Customization/TemplatesVerticalAppointmentPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Customization/TemplatesHorizontalAppointmentPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="ClientSide" Title="Client Side">
        <Demo Key="AppointmentsSelection" Title="Appointments Selection" SeoTitle="Appointments Selection">
          <Description>
            <![CDATA[
          <p>
          The DevExpress MVC Scheduler provides a client-side API that can be used to obtain information on the currently selected appointment.
          </p><p>
          The <b>SchedulerSettings.ClientSideEvents.AppointmentsSelectionChanged</b> property specifies a function that will handle the appointment selection. Within that function the client-side  <b>ASPxClientScheduler.GetAppointmentProperties</b> method is used to obtain appointment property values.
          </p><p>
                  <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
        </p>]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/ClientSide/AppointmentsSelectionPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="Reporting" Title="Reporting">
        <Demo Key="ReportTemplates" Title="Report Templates" SeoTitle="Report Templates" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/ReportTemplates.png">
          <Description>
            <![CDATA[
          <p>
          This demo illustrates how to create reports which correspond to different Scheduler views by loading report templates. You can load a previously saved template and instantly preview a report filled with data retrieved from the current Scheduler control.
          </p><p>
          Click the Show Preview button to invoke the Document Viewer control that allows you to navigate pages, print the report and export it to common formats.
          </p><p>
          <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
          </p>]]>
          </Description>
          <HighlightedDescription>
            Print schedules as your needs dictate using ready-to-use report templates in the DevExpress ASP.NET MVC Scheduler Extension. This demo illustrates the various types of report templates available in Scheduler.
          </HighlightedDescription>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Models/SchedulerDemoHelper.cs</SourceFile>
          <SourceFile>~/Views/Reporting/ReportTemplatesPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Reporting/ReportTemplatesPreviewPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Reporting/ReportTemplatesViewerPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>

      <DemoGroup Key="CalendarFeatures" Title="Calendar Features">
        <Demo Key="DateNavigator" Title="Date Navigator" SeoTitle="Date Navigator" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/DateNavigator.png" >
          <Description>
            <![CDATA[
          <p>
          This demo illustrates how to use the MVCxDateNavigator control to select the visible date interval of the Scheduler. Days with appointments are shown in bold.
          </p><p>
          Click  and drag within the Date Navigator to select an interval of dates. Note that the Scheduler changes its view for better display of the chosen interval. You can also select a discontinuous interval by holding the Ctrl key.
          </p><p>
          <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
          </p>]]>
          </Description>
          <HighlightedDescription>
            Use the Data Navigator Control that provides an intuitive way with which to select dates. You can select a single day or a continuous range of dates using your mouse.
          </HighlightedDescription>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/CalendarFeatures/DateNavigatorPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="CustomWorkTime" Title="Custom Work Time" SeoTitle="Custom Work Time">
          <Description>
            <![CDATA[
          <p>
          This demo illustrates the DevExpress MVC Scheduler capability to specify custom work time intervals. To see this feature in action, toggle the Custom Work Time checkbox and observe that different days of week have different work time intervals indicated by color shading.
          </p><p>
          The technique utilizes the <b>SchedulerSettings.QueryWorkTime</b> event handler. It allows you to get information about the current resource and date for which the work time interval is requested and specify work time as required.
          </p><p>
          <i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
          </p>]]>
          </Description>
          <SourceFile>~/Models/Cars.cs</SourceFile>
          <SourceFile>~/Views/CalendarFeatures/CustomWorkTimePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="HtmlEditor" Url="MVCxHTMLEditorDemos" Title="ASP.NET MVC HTML Editor" SeoTitle="ASP.NET MVC HTML Rich-Text Content Editor" NavItemTitle="HTML Editor" OrderIndex="6" IsMvc="true">
      <Keywords>richeditor, htmleditor, word, office, texteditor</Keywords>
      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument8967
      </DocUrl>

      <IntegrationImageUrl>~/Content/HtmlEditor.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC HTML Editor">
        <BannerTitle>
          Rich Text Editor Extension for
          &#160;
          ASP.NET MVC
        </BannerTitle>
        <BannerText>
          Microsoft Word&#174; style WYSIWYG interface synchronized with HTML code editor
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=uoFpUQmZ2S8</BannerUrl>
        <DescriptionTitle>
          Welcome to the online demo site of the HtmlEditor Extension
        </DescriptionTitle>
        <Description>
          <![CDATA[
                  <p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxHtmlEditor Suite</b>. These features include:</p>
              ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <Description>
          <![CDATA[
             <p>The DevExpress ASP.NET MVC HtmlEditor is a rich-text WYSIWYG HTML editor extension. Its intuitive user interface enables even inexperienced users to edit HTML page content with ease.</p>
             <p>Two simple steps to add a DevExpress HtmlEditor extension to your page are as follows:</p>
             <p>1. <i>Editing the View</i>. First, you need to declare the HtmlEditor extension inside of the View. Specifically, you will create a Partial View because the extension provides AJAX callbacks by default, to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the HtmlEditor extension inside of a Partial View and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property:</p>
             <p>Partial View code:</p>
              <code lang="html">
                @Html.DevExpress().HtmlEditor(settings => {
                    settings.Name = "htmlEditor";
                    settings.CallbackRouteValues = new { 
                      Controller = "Overview", Action = "OverviewPartial" 
                    };
                    settings.Html = "<div><strong>Blueberries</strong> are perennial flowering plants with indigo-colored berries in the section <em><strong>Cyanococcus</strong></em> within the genus <em><a href='http://en.wikipedia.org/wiki/Vaccinium' title='Vaccinium'>Vaccinium</a></em> (a genus that also includes cranberries and bilberries).</div>";
                }).GetHtml()
              </code>
              <br />
              <p>2. <i>Editing the Controller</i>. Finally, the controller is where you'll need to define the action methods that will handle HtmlEditor's callbacks. The "OverviewPartial" action method below handles the callbacks. As you can see, the native DevExpress HtmlEditor extension follows the ASP.NET MVC pattern while still providing powerful features for your end-users.</p>
              <p>Controller code:</p>
              <code lang="CSharp">
                public class HomeController: Controller {
                  public ActionResult Index() {
                    return View("Overview");
                  }
                  public ActionResult OverviewPartial() {
                    return PartialView("OverviewPartial");
                  }
                }
              </code>
              <p><a href="http://www.youtube.com/watch?v=uoFpUQmZ2S8&amp;list=PL8h4jt35t1wh8cb26PSN9nv08wBqS4iPz">Watch a short six-minute getting started video now</a> to learn about the DevExpress HtmlEditor extension for ASP.NET MVC.</p>
            ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/user/DeveloperExpress/search?query=ASP.NET+MVC+HTML+Editor" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8967" Title="Documentation" />
        <KeyFeature Name="HTML Editing">
          <Description>
            <![CDATA[
             HTML Editor supports HTML input. You don't have to choose which input method to use, because the editor provides automatic two-way synchronization between the visual editor and HTML code.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="HTML Editor supports HTML input. You don't have to choose which input method to use, because the editor provides automatic two-way synchronization between the visual editor and HTML code.">
          <Description>
            <![CDATA[
             With the HTML Editor, you are free to customize toolbar content as your needs dictate.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Table Support">
          <Description>
            <![CDATA[
             The editor provides an extensive set of commands, allowing end-users to create, customize, and delete tables and their elements via built-in dialogs or context menus.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Built-in Image and Document Selectors">
          <Description>
            <![CDATA[
             Explorer-like tools help simplify the manner in which end-users insert images and documents.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Custom Dialogs">
          <Description>
            <![CDATA[
             HTML Editor offers you the capability to easily create custom dialogs and invoke them via toolbar items.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Import and Export">
          <Description>
            <![CDATA[
             With HTML Editor, you can import and export editor content from/to various document formats.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Rich Client-Side Functionality">
          <Description>
            <![CDATA[
             A comprehensive client-side API is available for HTML Editor. This functionality, coupled with the ability to handle a rich set of client events, dives you full control over the editor's behavior on the client side.
            ]]>
          </Description>
        </KeyFeature>
      </Overview>
      
      <DemoGroup Key="Features" Title="Features">
        <Demo Key="Features" Title="Html Editing" SeoTitle="Rich-Text and Html WYSIWYG Content Editing" IsUpdated="true">
          <Description>
            <![CDATA[
             <p>
                The DevExpress HTML Editor is a rich-text WYSIWYG HTML editor extension for ASP.NET MVC. Its intuitive user interface enables even the least experienced users to edit HTML page content with ease. This demo describes some of the features available to you when using the MVC HTML Editor. HTML code entered into the HTML Editor's HTML View can be automatically validated and transformed into XHTML 1.0 Transitional compliant markup. The HTML Editor exposes several options, allowing you to control required transformations.
            </p><p>
                In this demo, the HTML Editor has been customized so you can modify its numerous settings and see results in real time.
            </p><p>
                Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowScriptstopic.aspx">AllowScripts</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowIFramestopic.aspx">AllowIFrames</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowFormElementstopic.aspx">AllowFormElements</helplink> properties to control whether predefined tags and attribute types - scripts, IFRAME and form elements - are allowed within the editor's HTML code.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_UpdateDeprecatedElementstopic.aspx">UpdateDeprecatedElements</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_UpdateBoldItalictopic.aspx">UpdateBoldItalic</helplink> properties specify replacement of deprecated elements with valid analogs and converting <b>B</b> and <b>I</b> elements into the <b>STRONG</b> and <b>EM</b> elements, respectively.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_EnterModetopic.aspx">EnterMode</helplink> property allows you to specify the editor's behavior when the ENTER key is pressed by an end-user - you can choose between a paragraph or line break rendering.
            </p><p>
                If Design View is active within the HTML Editor, a context menu can be displayed for end-users, which is controlled by the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowContextMenutopic.aspx">AllowContextMenu</helplink> property.
            </p><p>
                With the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowHtmlViewtopic.aspx">AllowHtmlView</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowPreviewtopic.aspx">AllowPreview</helplink> properties, the HTML Editor's functionality can be further customized for your end-users.
            </p><p>
                Note: The demos presented here illustrate the use of custom images (which are uploaded to the server via callbacks) and ways to process/save them on the server. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorImageUploadSettings_UploadImageFoldertopic.aspx">SettingsImageUpload.UploadImageFolder</helplink> property is set to a Controller variable, specifying the server folder used to store uploaded images, and the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxHtmlEditorImageUploadSettings_UploadCallbackRouteValuestopic.aspx">SettingsImageUpload.UploadCallbackRouteValues</helplink> property is used to reference the Controller's method that processes each uploaded image. This method calls the HTMLEditorExtension.SaveUploadedImage static method in order to validate the image and save it to the specified server folder.
            </p>]]>
          </Description>
          <SourceFile>~/Views/Features/FeaturesPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Features/FeaturesOptionsPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Tables" Title="Tables" SeoTitle="Tables" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Tables.png">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the MVC HTML Editor’s built-in support of HTML tables. The HTML Editor allows end-users to create, customize, and delete tables and associated elements by using a set of predefined commands. The commands associated with table editing are available as a separate toolbar (<b>TableToolbar</b>) or by using an individual toolbar button (<helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxHtmlEditorToolbarTableOperationsDropDownButtontopic.aspx">ToolbarTableOperationsDropDownButton</helplink>) with a dropdown list of individual commands. By default, the <b>ToolbarTableOperationsDropDownButton</b> toolbar type button belongs to a standard toolbar (<b>StandardToolbar1</b>).
            </p><p>
                In this demo, HTML table operation commands are represented within a manually created toolbar of the <b>TableToolbar</b> type. The necessary toolbar buttons are created using the toolbar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorToolbar_CreateDefaultItemstopic.aspx">CreateDefaultItems</helplink> method.
            </p>]]>
          </Description>
          <HighlightedDescription>The HtmlEditor allows end-users to create, customize, and delete tables and their elements using a set of specific predefined commands. This demo illustrates the editor's support for HTML table operations.</HighlightedDescription>
          <SourceFile>~/Views/Features/TablesPartial.cshtml</SourceFile>
        <SourceFile>~/Content/HtmlEditor/DemoCss/Tables.css</SourceFile>
        </Demo>
        <Demo Key="Validation" Title="Validation" SeoTitle="Validation">
          <Description>
            <![CDATA[
                <p>This demo illustrates the content validation capabilities available to you within the DevExpress MVC HTML Editor. You can define Editor content validation logic - both on the client and server - via any of the following methods:</p>
                <ul>
                    <li>Check if content is empty. Enable the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorValidationSettings_RequiredFieldtopic.aspx">SettingsValidation.RequiredField</helplink> property to force the editor to require input and display a prompt message when validation fails.</li>
                    <li>Provide custom validation logic by handling the Editor’s <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_Validationtopic.aspx">Validation</helplink> client event or passing the delegate method as a parameter to the extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorExtension_GetHtmltopic.aspx">GetHtml</helplink> function, called within the <b>Validation</b> action. Open the Code tab within this demo to see how this is accomplished.</li>
                </ul>
                <p>You are free to combine these methods together to augment validation rules when required. Additional validation options can be specified via the Editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorSettings_SettingsValidationtopic.aspx">SettingsValidation</helplink> property. Among others, there are options for an error frame, which is displayed within the editor's Design View when the Editor fails validation. These options allow you to specify both error description and appearance settings. In addition, you can dynamically customize error descriptions within validation event handlers.</p> 
                ]]>
          </Description>
          <SourceFile>~/Views/Features/ValidationPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Features/ValidationSuccess.cshtml</SourceFile>
        </Demo>
        <Demo Key="ImportExport" Title="Import/Export" SeoTitle="Data Import/Export from/to RTF, MHT, ODT, DOCX, PDF">
          <Keywords>importing, exporting, txt, odt, Office, Open, XML, MIME, html, Plain, PDF, mht</Keywords>
          <Description>
            <![CDATA[
                <p>This demo illustrates how to import and export contents of the DevExpress MVC HTML Editor.</p>
                <p>With the HTML Editor, you can import and export editor contents from/to various document formats, including:</p>
                <ul>
                <li>Rich Text (.rtf)</li>
                <li>Office Open XML (.docx)</li>
                <li>MIME HTML (.mht)</li>
                <li>Open Document (.odt)</li>
                <li>Plain Text (.txt)</li>
                <li>Portable Document (.pdf). Available for export only.</li>
                </ul>
                <p>To import or export in code, call the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorExtension_Importtopic.aspx">HtmlEditorExtension.Import</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorExtension_Exporttopic.aspx">HtmlEditorExtension.Export</helplink> static method. You can allow end-users to export editor contents via a specially designed toolbar item (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarExportDropDownButtontopic">ToolbarExportDropDownButton</helplink>) that provides all the required functionality out of the box. All you have to do is add it to the editor's toolbar and customize output document formats available for end-users via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarExportDropDownButton_Itemstopic">Items</helplink> collection.
                </p>
                ]]>
          </Description>
          <SourceFile>~/Views/Features/ImportExportPartial.cshtml</SourceFile>
        <SourceFile>~/Content/HtmlEditor/DemoCss/Export.css</SourceFile>
        </Demo>
        <Demo Key="ContextMenu" Title="Context Menu" SeoTitle="Context Menu">
          <Description>
            <![CDATA[
                <p>An <b>HtmlEditor</b> context menu is a popup menu, displayed when an end-user right-clicks the content within the editor. You can select the context menu type that you wish to be displayed for end-users: a browser's context menu (for IE, Opera, etc.) that provides commands specific to this browser, or the editor's menu that provides common (Cut, Copy, Paste, Select All) and context-specific  (Modify Table, Change Image, etc.) operations. It is also possible to disable the context menu.</p>
        <p>By default, <b>HtmlEditor</b> provides a set of context menu items. You can customize the default items or add your custom items. Additionally a context menu content can be easily customizable at run time by changing an items' visibility. Visibility of default items is switched based on the currently selected element  (text, image, table, etc.) automatically.</p>
        <p>In this demo three custom context menu items are added to the default item collection. The custom item is shown provided that an image is selected.</p>
                ]]>
          </Description>
          <SourceFile>~/Views/Features/ContextMenuPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ToolbarMode" Title="Toolbar Mode" SeoTitle="Toolbar Mode" IsNew="true">
          <Description>
            <![CDATA[
            <p>This demo illustrates the DevExpress ASP.NET MVC HTML Editor extension's ability to support either a menu toolbar or a ribbon toolbar element.</p> 
            <p>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcHtmlEditorSettings_ToolbarModetopic">ToolbarMode</helplink> property specifies the type of the toolbar. This property can be set to the following values.</p> 
            
                <b>Menu</b> – the toolbar for the HTML Editor is rendered as a menu. The menu toolbars can be customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcHtmlEditorSettings_Toolbarstopic">Toolbars</helplink> collection.
                <b>Ribbon</b> – the toolbar for the HTML Editor is rendered as a ribbon. The ribbon tabs can be customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcHtmlEditorSettings_RibbonTabstopic">RibbonTabs</helplink> collection.
                <b>None</b> – the HTML Editor does not have a toolbar.
                <b>ExternalRibbon</b> – the HTML Editor uses an external <helplink href="http://help.devexpress.com/#AspNet/CustomDocument16297">Ribbon</helplink> extension as a toolbar. To try this toolbar mode, see the <b>External Ribbon</b> demo.
            <p>In this demo, use the <b>Toolbar Mode</b> combo box to specify the HTML Editor toolbar mode. Since the menu toolbar and ribbon tab collections are not customized in the markup, the default collections are rendered in the HTML Editor.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/Features/ToolbarModePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ExternalRibbon" Title="External Ribbon" SeoTitle="External Ribbon" IsNew="true">
          <Description>
            <![CDATA[
               <p>The DevExpress ASP.NET MVC HTML Editor extension provides the capability to utilize an external <helplink href="http://help.devexpress.com/#AspNet/CustomDocument16297">Ribbon</helplink> extension as a toolbar. 
                To enable this functionality, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcHtmlEditorSettings_ToolbarModetopic">ToolbarMode</helplink> property to <b>ExternalRibbon</b>. 
                The ribbon extension used by the editor can be specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcHtmlEditorSettings_AssociatedRibbonNametopic">AssociatedRibbonName</helplink> property.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/Features/ExternalRibbonPartial.cshtml</SourceFile>
          <SourceFile>~/Scripts/ExternalRibbon.js</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Dialogs" Title="Dialogs">
        <Demo Key="SpellChecking" Title="Spell Checking" SeoTitle="Spell Checking">
          <Description>
            <![CDATA[
             <p>
                This demo illustrates the spell checking capabilities of the DevExpress MVC HTML Editor. Spell checking is based upon the selected dictionary (ISpell and OpenOffice dictionaries are supported), culture and grammar. These settings can be defined via HTML Editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorSettings_SettingsSpellCheckertopic.aspx">SettingsSpellChecker</helplink> property.
            </p><p>
                To start spell checking, click the default 'Check Spelling' button.                
            </p>]]>
          </Description>
          <SourceFile>~/Views/Dialogs/SpellCheckingPartial.cshtml</SourceFile>
        <SourceFile>~/Content/HtmlEditor/DemoCss/SpellChecking.css</SourceFile>
        </Demo>
        <Demo Key="CustomDialogs" Title="Custom Dialogs" SeoTitle="Custom Dialogs" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Dialogs.png">
          <Description>
            <![CDATA[
            <p>This demo illustrates ways in which you can add custom dialogs to the DevExpress MVC HTML Editor. In addition to the built-in dialogs available within the Html Editor, you can use any number of custom dialogs, which can be easily added at both design and runtime. To add custom dialogs to the editor, use its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorSettings_CustomDialogstopic.aspx">CustomDialogs</helplink> collection. A custom dialog is represented by an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebMvcMVCxHtmlEditorCustomDialogtopic">HtmlEditorCustomDialog</helplink> object, which provides the following settings:</p>
            <ul>
                <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_Captiontopic.aspx">Caption</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_Nametopic.aspx">Name</helplink>. Use these properties to specify the dialog’s caption and name.</li>
                <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxHtmlEditorCustomDialog_FormActiontopic.aspx">FormAction</helplink>. Use this property to provide a path to the user control representing a dialog's form. In this demo, the form contains a Grid View extension bound to the InsertTemplateData.xml file, which provides predefined content templates.</li>
                <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_OkButtonTexttopic.aspx">OkButtonText</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_OkButtonVisibletopic.aspx">OkButtonVisible</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_CancelButtonTexttopic.aspx">CancelButtonText</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_CancelButtonVisibletopic.aspx">CancelButtonVisible</helplink>. These options allow you to specify the visibility and caption of two standard dialog buttons. By default, these buttons are labeled "Ok" and "Cancel". You can customize default button captions as necessary. In this demo, the Ok button's caption is modified to reflect the dialog's functionality.</li>
            </ul>
            <p>You can associate a custom dialog with a toolbar item - which when clicked invokes the dialog. To accomplish this, add a <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarCustomDialogButtontopic">ToolbarCustomDialogButton</helplink> toolbar item to the HTML Editor, and assign the dialog's name to the toolbar item's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDialogButton_Nametopic.aspx">Name</helplink> property.</p>
            <p>In this demo, you can click the Insert Template button to invoke the custom dialog. Within the dialog, select the desired template and click the Insert button (or simply double click the template) to insert it into the editor. You may de-activate the dialog's "Overwrite content" option in order to preserve current content when inserting templates.</p>
            <p>The MVC HTML Editor offers events that allow you to respond to end-user actions within custom dialogs and dialog button clicks on the client side. Events include:</p>
            <ul>
                <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogOpenedtopic.aspx">CustomDialogOpened</helplink>. You can handle this event to initialize a custom dialog. In the demo, the <b>OnCustomDialogOpened</b> JavaScript function represents the <b>CustomDialogOpened</b> event handler. This function calls the <b>RestoreInsertTemplateFormDialogState</b> function to focus the recently selected template in the dialog and restore the checked state of the "Overwrite content" option.</li>
                <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosingtopic.aspx">CustomDialogClosing</helplink>. You can handle this event to respond to closing a custom dialog (initiated via a click on a dialog button or the header's close button). To identify a dialog and an element being clicked, use the event parameter's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorCustomDialogEventArgs_nametopic.aspx">name</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorCustomDialogCloseEventArgsBase_statustopic.aspx">status</helplink> properties. To prevent default processing when closing a dialog, assign true to the event parameter's handled property. In this demo, the <b>OnCustomDialogClosing</b> JavaScript function represents the <b>CustomDialogClosing</b> event handler. This function retrieves the selected template's text when the Insert dialog button is clicked (it's the Ok dialog button labeled "Insert"), and closes the dialog via a <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogCompletetopic.aspx">ASPxClientHtmlEditor.CustomDialogComplete</helplink> method call. Since the dialog is closed programmatically, the function prevents the default closing of the dialog. Note that you can also double click a template to select it, and close the dialog. This is accomplished by handling the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_RowDblClicktopic.aspx">RowDblClick</helplink> client event of the Grid View extension use within the dialog (see the <b>OnGridRowDblClick</b> function).</li>
                <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosedtopic.aspx">CustomDialogClosed</helplink>. You can handle this event to perform specific actions based upon the dialog button that has been clicked or any other suitable condition. In this demo, the <b>OnCustomDialogClosed</b> JavaScript function represents the <b>CustomDialogClosed</b> event handler. This function inserts the selected template's text into the editor after pressing the dialog's Insert button or double-clicking the template. In addition, this function calls the <b>SaveInsertTemplateFormDialogState</b> function to store the dialog's selected template and the checked state of the "Overwrite content" option for future use.</li>
            </ul>            
                ]]>
          </Description>
          <HighlightedDescription>Easily add custom dialogs to the HtmlEditor. This demo illustrates a custom dialog associated with a toolbar item in the HtmlEditor.</HighlightedDescription>
          <SourceFile>~/Views/Dialogs/CustomDialogsPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="ToolbarItems" Title="Toolbar Items">
        <Demo Key="CustomCss" Title="Custom CSS" SeoTitle="Custom CSS">
          <Description>
            <![CDATA[
            <p>
                The DevExpress MVC HTML Editor provides Custom CSS options that allow you to deliver custom formats as defined by custom CSS classes - exposed to end-users and applied to the content selected within the editor. By using the Custom CSS feature of the DevExpress MVC HTML Editor, logical elements (such as titles, headers, text blocks, etc) can be formatted using individual formatting styles, defined by names of the associated CSS class and HTML tag.
            </p><p>
                In this demo, custom styles are defined for content text elements such as article title, headers, the main content text and image titles. To apply any of the predefined styles to the text selected within the Design View, choose the desired style item within the "Apply CSS" bar item.
            </p><p>
                The standard toolbar's "Apply CSS" dropdown editor (ToolbarCustomCssEdit type) allows you to list available custom CSS styles and make them available to end-users.
            </p>
            <p>
                When the <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorInsertImageDialogSettings_ShowImageStyleSettingsSectiontopic">ShowImageStyleSettingsSection</helplink> property is set to <b>true</b>, the HTML Editor allows end-users to specify the CSS class for an image using the image dialog. To apply a style to an image, invoke the image dialog by double-clicking the image, by right-clicking the image and selecting <b>Change Image…</b> in the context menu, or by selecting the image and clicking the <b>Insert Image</b> button in the toolbar. In the invoked <b>Change Image</b> dialog, select the <b>More options</b> check box. Use the <b>CSS class</b> combo box on the right to select the CSS class for the current image. The CSS styles listed in the combo box can be specified using the editor's <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorFormsSettings_InsertImageCssClassItemstopic">InsertImageCssClassItems</helplink> property.
            </p>]]>
          </Description>
          <SourceFile>~/Views/ToolbarItems/CustomCssPartial.cshtml</SourceFile>
        <SourceFile>~/Content/HtmlEditor/DemoCss/CustomCss.css</SourceFile>
          <SourceFile>~/Content/HtmlEditor/DemoCss/PreviewCustomCss.css</SourceFile>
        </Demo>
        <Demo Key="CustomToolbarItems" Title="Custom Toolbar Items" SeoTitle="Custom Toolbar Items" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/ItemPicker.png">
          <Description>
            <![CDATA[
                <p>This demo illustrates how you can extend the MVC HTML Editor’s toolbar with custom items and implement item-specific functionality.</p>
                <p>In addition to standard items available within built-in toolbars, the HTML Editor allows you to add custom items and provide specific functionality for them. The following custom item types are shipped with the MVC HTML Editor:</p>
                <ul>
                    <li><b>Combo Box</b> (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarComboBoxtopic">ToolbarComboBox</helplink> item). A combo box provides a standard dropdown list of individual items. In this demo, you can apply a specific font size to the currently selected content by picking an appropriate combo box item.</li>
                    <li><b>Dropdown Item Picker</b> (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownItemPickertopic">ToolbarDropDownItemPicker</helplink> item). A dropdown item picker represents a button with a dropdown and contains a list of selectable items. To select an item, users can hover the mouse pointer over a button or click it to activate its dropdown list and then select an item within the list. In this demo, you can insert smilies within the editor via a dropdown item picker.</li>
                    <li><b>Dropdown Menu</b> (<helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownMenutopic.aspx">ToolbarDropDownMenu</helplink> item). A dropdown menu item represents a button that displays a dropdown menu when clicked. In this demo, you can insert the current date and time into the editor by selecting the desired date/time format within the dropdown menu.</li>
                </ul>
                <p>To ensure ease of use, these item types provide a common API.  Open the demo's Code page to see how you can populate dropdown lists with items and respond to item clicks.</p>
                ]]>
          </Description>
          <HighlightedDescription>A Drop-down Item Picker is a button with a drop-down menu that allows an end-user to choose from a list of items. This demo illustrates how to add a Drop-down Item Picker to the toolbar of the HtmlEditor.</HighlightedDescription>
          <SourceFile>~/Views/ToolbarItems/CustomToolbarItemsPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="TreeList" Url="MVCxTreeListDemos" Title="ASP.NET MVC Tree List" SeoTitle="ASP.NET MVC Tree List" NavItemTitle="Tree List" OrderIndex="7" IsMvc="true">
      <Keywords>hierarchy, hierarchical, nodes</Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument13765
      </DocUrl>

      <IntegrationImageUrl>~/Content/TreeList.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC TreeView-Grid Hybrid Control">
        <BannerTitle>
          TreeView-Grid Hybrid Extension for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          Fully supports data-bound and unbound modes, on-demand child node loading, multiple built-in themes and ASP.NET Templates
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=g02ryLQVNb8</BannerUrl>
        <DescriptionTitle>
          Welcome to the online demo site of the TreeList
        </DescriptionTitle>
        <Description>
          <![CDATA[
                  <p>This website demonstrates some of the many features and capabilities available to you when using our <b>TreeList</b>. These features include:</p>
              ]]>
        </Description>
      </Intro>

      <Overview Title="Overview">
        <Description>
          <![CDATA[
              <p>The DevExpress ASP.NET MVC TreeList extension combines the power of the Grid with the hierarchical structure of the TreeView. Like the GridView, the TreeList supports binding to data, editing data, sorting, and more.</p>
              <p>Follow the three simple steps below to add a DevExpress TreeList extension and bind it to your data. It's easy as “M”, “V”, and “C”.</p>
              <p>1. Model (the "M" in MVC). First, we need a Model object for the DevExpress TreeList to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. However, you can use any model that supports the IEnumerable or IQueryable interface. Since the TreeList is designed to display information in a tree structure, its data source needs two additional fields to build a tree structure. The first is a "Key Field" that must contain unique values. And the second is a "Parent Field" that must contain values that indicate parent nodes for the current node (<helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument16238">learn more in our online documentation</helplink>).</p>
              <p>2. View (the "V" in MVC). Next declare the TreeList extension inside of the View. Specifically, you will create a Partial View because the DevExpress TreeList extension provides AJAX callbacks by default, to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the TreeList extension inside of a Partial View and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property:</p>
              <p>Partial View code:</p>
              <code lang="html">
                @Html.DevExpress().TreeList(settings => {
                    settings.Name = "treeList";
                    settings.CallbackRouteValues = new { Controller = "Overview", Action = "OverviewPartial" };
                    settings.KeyFieldName = "ID";
                    settings.ParentFieldName = "ParentID";
                    settings.Settings.ScrollableHeight = 250;
                    settings.Settings.VerticalScrollBarMode = 
                      ScrollBarMode.Auto;
                    settings.Columns.Add("Department");
                    settings.Columns.Add(column => {
                        column.FieldName = "Budget";
                        column.PropertiesEdit.DisplayFormatString = "{0:C}";
                    });
                    settings.Columns.Add("Location");
                }).Bind(Model).GetHtml()
              </code>
              <br />
              <p>3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that will handle TreeList's callbacks. The "OverviewPartial" action method below handles the callbacks. The <b>DepartmentsModel.GetData</b> method gets the data from the data source to pass to the View. As you can see, the native DevExpress TreeList extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.</p>
              <p>Controller code:</p>
              <code lang="CSharp">
                public class HomeController: Controller {
                  public ActionResult Index() {
                    return View("Overview", DepartmentsModel.GetData());
                  }
                  public ActionResult OverviewPartial() {
                    return PartialView("OverviewPartial", DepartmentsModel.GetData());
                  }
                }
              </code>
              <p><a href="http://www.youtube.com/watch?v=g02ryLQVNb8&amp;list=PL8h4jt35t1wh8cb26PSN9nv08wBqS4iPz&amp;index=5">Watch a short nine-minute getting started video now</a> to learn about the DevExpress TreeList extension for ASP.NET MVC.</p>
             ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/user/DeveloperExpress/search?query=ASP.NET+MVC+TreeList" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument13765" Title="Documentation" />
        <KeyFeature Name="Binding to Data">
          <Description>
            <![CDATA[
             The TreeList can easily be populated with data by binding to any standard data source type. You can also bind the TreeList to any object that represents a tree structure, or manually create a tree in code.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Virtual Mode">
          <Description>
            <![CDATA[
             The TreeList can operate in Virtual Mode. This mode can be useful when binding to large data sets. In virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Built-in Edit Modes">
          <Description>
            <![CDATA[
             TreeList provides multiple edit modes: in-line data editing, and editing via the edit form and popup edit form. End-users can switch the TreeList extension to an edit mode by clicking the Edit command.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Full Data Summaries">
          <Description>
            <![CDATA[
             The TreeList enables you to calculate summary values for all values within a column or within a group of nodes, and display the results inside footer cells. The TreeList provides five built-in aggregate functions (COUNT, MAX, MIN, etc.) and events to manually implement custom aggregate functions.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Preview Nodes">
          <Description>
            <![CDATA[
             With preview rows, you can let your end-users view large text or memo fields directly in the TreeList, without the need to open an external editor or drop-down window.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Runtime Column Customization">
          <Description>
            <![CDATA[
             End-users can manage the layout of tree list columns by rearranging, adding and removing columns by drag-and-drop.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Built-in Pager">
          <Description>
            <![CDATA[
             The TreeList can automatically split content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Nodes Iterator">
          <Description>
            <![CDATA[
             The Nodes Iterator allows you to avoid writing recursive code to visit all nodes contained in a TreeList. It simplifies the task of traversing through the nodes.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Template Technology">
          <Description>
            <![CDATA[
             Templates are fully supported. For each element within the TreeList, you can customize the appearance or layout using any HTML content or server-side extension.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Rich Client-Side Functionality">
          <Description>
            <![CDATA[
             A comprehensive client-side API is available for the TreeList.
            ]]>
          </Description>
        </KeyFeature>
      </Overview>
      
      <DemoGroup Key="DataBinding" Title="Data Binding">
        <Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
          <Description>
            <![CDATA[
                    <p>This demo shows how to bind the TreeList to a <b>List</b> object. Since the TreeList is designed to display information in a tree structure, its data source should meet certain requirements. Two additional fields are necessary to build a tree structure.</p><p>The first field must contain unique values. This field must be assigned to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_KeyFieldNametopic.aspx">KeyFieldName</helplink> property. The second field must contain values that indicate parent nodes for the current node. It should be assigned to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_ParentFieldNametopic.aspx">ParentFieldName</helplink> property. Columns bound to these fields are called Service columns.</p><p>In this demo, toggle the '<b>Show service columns</b>' check box to display or hide service columns.</p>
                ]]>
          </Description>
          <SourceFile>~/Models/Departments.cs</SourceFile>
          <SourceFile>~/Views/DataBinding/DataBindingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="DataBindingToXML" Title="Data Binding To XML" SeoTitle="Data Binding To XML">
          <Description>
            <![CDATA[
                <p>This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to populate the TreeList with node information taken from an XML file. The source XML file contains hierarchical information about a set of website pages.</p>

                <p>The MVC TreeList can be bound to an XML file with the following data binding methods:</p>

                <ul>
                <li>BindToXML(string fileName);</li>
                <li>BindToXML(string fileName, string xPath);</li>
                <li>BindToXML(string fileName, string xPath, string transformFileName);</li>
                </ul>

                <p>In this demo, a column is added to the tree list. This column <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListDataColumn_FieldNametopic.aspx">FieldName</helplink> property value defines a name of the corresponding data source field.</p>
              ]]>
          </Description>
          <SourceFile>~/Views/DataBinding/DataBindingToXMLPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="UnboundMode" Title="Unbound Mode" SeoTitle="Unbound Mode">
          <Description>
            <![CDATA[
                  <p>The TreeList supports the unbound mode. In this mode, you need to manually create a tree in code. The TreeList stores its nodes within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_Nodestopic.aspx">Nodes</helplink> collection. The tree list nodes store child nodes within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListNode_ChildNodestopic.aspx">ChildNodes</helplink> collection.</p>
              ]]>
          </Description>
          <SourceFile>~/Views/DataBinding/UnboundModePartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="VirtualMode" Title="Virtual Mode" SeoTitle="Virtual Mode" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/VirtualMode.png">
          <Description>
            <![CDATA[
                <p>In addition to bound and unbound modes, the TreeList extension can operate in a Virtual Mode, which greatly reduces both the server load and start-up time when working with complex or dynamically created data. In a virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded. </p>
                <p>To implement a virtual mode for the TreeList extension, a specifically parameterized <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_BindToVirtualDatatopic.aspx">BindToVirtualData</helplink> method can be used. The method's parameters refer to delegate methods that can be declared as static methods within a model class. Within the first delegate method, create a list of business objects that correspond to the child nodes owned by the processed node. The second one enables you to specify the node's key value and cell values.</p>
                <p>In this demo, the TreeList extension uses this data binding method to display the file/folder tree of this demo's website. </p>
            ]]>
          </Description>
          <HighlightedDescription>The TreeList combines the power of the grid view with the hierarchical structure of the tree view. Like the GridView, the TreeList supports binding to data, editing data, sorting, and more. This demo showcases the Virtual Mode feature of TreeList, in which child nodes are generated on demand when a parent node is expanded.</HighlightedDescription>
          <SourceFile>~/Models/VirtualMode/TreeListVirtualModeHelper.cs</SourceFile>
          <SourceFile>~/Views/DataBinding/VirtualModePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Appearance" Title="Appearance Customization">
        <Demo Key="ConditionalFormatting" Title="Conditional Formatting" SeoTitle="Conditional Formatting" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/Formatting.png">
          <Description>
            <![CDATA[
                <p>The TreeList extension enables you to provide custom style settings used to paint individual data cells or entire nodes depending upon the contents of the TreeList. To do this, you should handle the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_HtmlDataCellPreparedtopic.aspx">HtmlDataCellPrepared</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_HtmlRowPreparedtopic.aspx">HtmlRowPrepared</helplink> events, respectively. This gives you unlimited capabilities to flag data as needed.</p>
            ]]>
          </Description>
          <HighlightedDescription>The TreeList allows you to highlight specific elements if certain conditions are met. In this demo, TreeList changes the appearance of individual data cells based on their content.</HighlightedDescription>
          <SourceFile>~/Models/Departments.cs</SourceFile>
          <SourceFile>~/Views/Appearance/ConditionalFormattingPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Shaping" Title="Data Shaping">
        <Demo Key="Sorting" Title="Sorting" SeoTitle="Sorting">
          <Description>
            <![CDATA[
                  <p>Automatic column sorting for any data source allows you to sort against an unlimited number of columns, without writing a single line of code. A column's current sort order is indicated by a sort glyph displayed at the column header's right edge. If the column isn't sorted, the sort glyph is hidden.</p><p>Click a column's header to sort data against a data column or change the column's sort order. To sort data against multiple columns, click column headers with the SHIFT key pressed down. Clicking a column header with the CTRL key pressed down removes sorting by column's values but preserves other sort conditions.</p><p>Set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsBehavior_AllowSorttopic.aspx">SettingsBehavior.AllowSort</helplink> option to <b>true</b> to enable end-user sorting.</p><p>The TreeList provides a Client-Side API that enables you to apply sorting on the client. To do this, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_SortBytopic.aspx">SortBy</helplink> client method.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/Departments.cs</SourceFile>
          <SourceFile>~/Views/Shaping/SortingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="NodePreview" Title="Node Preview" SeoTitle="Node Preview">
          <Description>
            <![CDATA[
                <p>The TreeList extension provides a preview feature that allows each node to display a preview.</p>
                <p>Preview areas allow large memo fields or custom data to be displayed across all the columns within the TreeList.</p>
                <p>To enable the Preview feature, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowPreviewtopic.aspx">Settings.ShowPreview</helplink> property to <b>true</b>.</p>
                <p>You can specify the required data source field via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_PreviewFieldNametopic.aspx">PreviewFieldName</helplink> property to bind node previews to data.</p>
                <p>Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListStyles_Previewtopic.aspx">Styles.Preview</helplink> property to access the style settings used to paint previews.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/FishCatalog.cs</SourceFile>
          <SourceFile>~/Views/Shaping/NodePreviewPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates" SeoTitle="Templates">
          <Description>
            <![CDATA[
                <p>The TreeList provides a set of templates that allow you to create custom layouts for its visual elements (column headers, data and footer cells, etc.).</p>
                <p>This sample uses Temlplates for individual nodes.</p>
                <p>The <b>DataBinder.Eval</b> method is used to define one-way (read-only) binding. The <b>DataBinder.Eval</b> method takes the name of a data field and returns an object containing the value of that field from the current record in the data source.</p>
                <p>You can also use Template Containers to obtain cell values, display text, etc.</p>
                <p>In this demo, the template contains a link labeled 'Show notes...'. Clicking this link or a picture displays a popup panel with additional information about an item. This information is obtained using a custom data callback.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/FishCatalog.cs</SourceFile>
          <SourceFile>~/Views/Shaping/TemplatesPartial.cshtml</SourceFile>
          <SourceFile>~/Content/TreeList/Templates.css</SourceFile>
          <SeeAlso Url="https://documentation.devexpress.com/#AspNet/CustomDocument14721" Title="Online Documentation - Templates" />
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Editing" Title="Data Editing">
        <Keywords>crud, dataedit</Keywords>
        <Demo Key="InlineEditing" Title="Inline Editing" SeoTitle="Inline Editing" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Editing.png" HighlightedTitle="Inline Editing" IsUpdated="true">
          <Keywords>crud, dataedit, unobtrusive validation</Keywords>
          <Description>
            <![CDATA[
                  <p>This demo describes the TreeList extension inline edit mode. In this edit mode, cell values are edited within the in-line edit node.</p>
                  <p>For each allowed data operation (such as inserting, updating, deleting or node dragging), provide an associated controller action that will apply data changes to the Model and return the tree list's partial view. You can reference these controller actions by their names using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_AddNewNodeRouteValuestopic.aspx">SettingsEditing.AddNewNodeRouteValues</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_UpdateNodeRouteValuestopic.aspx">SettingsEditing.UpdateNodeRouteValues</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_DeleteNodeRouteValuestopic.aspx">SettingsEditing.DeleteNodeRouteValues</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_NodeDragDropRouteValuestopic.aspx">SettingsEditing.NodeDragDropRouteValues</helplink> properties. Note that node dragging is an editing operation, because while changing the node's position, its parent row identificator changes.</p>
                  <p>To allow end-users to manipulate tree list data, add a <b>Command column</b> to the TreeList's column collection and specify which commands (New, Edit, Delete) can be used by end-users. To switch a tree list node to the edit mode, end-users should be allowed to click the <b>Edit</b> command.</p>
                  <p>The TreeList validates user-input on the client-side based on the <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument14707">data annotation attributes</helplink> of your Model. This approach is also called <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument12060">unobtrusive client validation</helplink>. To enable the unobtrusive validation, the partial View with the TreeList extension is placed inside the HTML &lt;form&gt; element (rendered via the<a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.118).aspx">Html.BeginForm</a> helper). The Partial View with the TreeList extension contains two helpers that enable the unobtrusive client validation: <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableclientvalidation(v=vs.118).aspx">Html.EnableClientValidation</a> and <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableunobtrusivejavascript(v=vs.118).aspx">Html.EnableUnobtrusiveJavaScript</a>.</p>
                  <p>An error is displayed next to the individual form editors. However, an additional error message can be displayed below the edit form using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_SetEditErrorTexttopic.aspx">SetEditErrorText</helplink> method.</p>
              ]]>
          </Description>
          <HighlightedDescription>The TreeList allows your end-users to edit data without the developer having to create edit forms. This demo illustrates the inline editing mode.</HighlightedDescription>
          <SourceFile>~/Models/NewsGroups.cs</SourceFile>
          <SourceFile>~/Views/Editing/InlineEditingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="InlineEditingWithTemplate" Title="Inline Editing (Templates)" SeoTitle="Inline Editing (Templates)">
          <Description>
            <![CDATA[
                  <p>The TreeList allows you to provide a custom edit mode layout by creating an appropriate template for particular edited node cells or an entire Edit Form.</p>
                  <p>This demo describes how a template for the TreeList's Edit Form can be defined using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_SetEditFormTemplateContenttopic.aspx">SetEditFormTemplateContent</helplink> method. Within a template, custom label-editor pairs and Update/Cancel buttons are explicitly created using helpers from DevExpress Data Editors Extensions (such as the Label, TextBox, ComboBox, SpinEdit, Button, etc.).</p>
                  <p>Editors used within a template are customized in the following simple manner: they are bound to corresponding model data fields (via the <b>Bind</b> method), are named according to these fields (via the <b>Name</b> property), and their ability to automatically visualize model errors when validation fails is enabled (via the <b>ShowModelErrors</b> property).</p>
                  <p>Editors are bound to values of the model's currently edited data object. Note that this object is passed into a template either automatically (as a template container's <b>DataItem</b> property - when a tree list node is just switched to the edit mode) or manually (as a <b>ViewData</b> data object passed from a controller - when data modifications cannot be accomplished due to an input validation fail and returning the edited data object back to the view's Edit Form without losing user changes is required). To correctly transfer values from DevExpress editors back to corresponding data model fields, the <b>DevExpressEditorsBinder</b> model binder is used within controller actions.</p>
                  <p>Buttons that represent the Update and Cancel links are customized so that their <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsHyperLinkProperties_Texttopic.aspx">Text</helplink> properties are defined ("Update" and "Cancel" texts) and the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientStaticEdit_Clicktopic.aspx">Click</helplink> client events are handled to call the TreeList's respective client methods - <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_UpdateEdittopic.aspx">UpdateEdit</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_CancelEdittopic.aspx">CancelEdit</helplink>.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/NewsGroups.cs</SourceFile>
          <SourceFile>~/Views/Editing/InlineEditingWithTemplatePartial.cshtml</SourceFile>
          <SourceFile>~/Views/Editing/InlineEditFormTemplatePartial.cshtml</SourceFile>
          <SeeAlso Url="https://documentation.devexpress.com/#AspNet/CustomDocument14721" Title="Online Documentation - Templates" />
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Exporting" Title="Exporting Data">
        <Demo Key="Export" Title="Exporting Data" SeoTitle="Exporting Data to PDF, XLS, XLSX, RTF">
          <Description>
            <![CDATA[
                            <p>The TreeList extension allows you to export data with ease.</p><p>Data can be exported to a file or stream in the following formats:</p>
                            <ul>
                            <li>PDF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToPdftopic.aspx">TreeListExtension.ExportToPdf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WritePdftopic.aspx">TreeListExtension.WritePdf</helplink>)</li>
                            <li>XLS (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToXlstopic.aspx">TreeListExtension.ExportToXls</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WriteXlstopic.aspx">TreeListExtension.WriteXls</helplink>)</li>
                            <li>XLSX (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToXlsxtopic.aspx">TreeListExtension.ExportToXlsx</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WriteXlsxtopic.aspx">TreeListExtension.WriteXlsx</helplink>)</li>
                            <li>RTF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToRtftopic.aspx">TreeListExtension.ExportToRtf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WriteRtftopic.aspx">TreeListExtension.WriteRtf</helplink>)</li></ul>
                        ]]>
          </Description>
          <SourceFile>~/Models/Departments.cs</SourceFile>
          <SourceFile>~/Views/Exporting/ExportPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Selection" Title="Node Selection">
        <Demo Key="MultipleNodeSelection" Title="Multiple Node Selection" SeoTitle="Multiple Node Selection" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Selection.png">
          <Description>
            <![CDATA[
                <p>To allow end-users to select nodes, enable the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Enabledtopic.aspx">SettingsSelection.Enabled</helplink> option. Nodes will display selection cells that contain check boxes. End-users can check or uncheck these check boxes to select or unselect the corresponding nodes.</p><p>To enable end-users to select all nodes displayed within the TreeList, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_AllowSelectAlltopic.aspx">SettingsSelection.AllowSelectAll</helplink> property to true. This displays a check box within the column header panel used to select/de-select all nodes. In this demo, to show/hide this check box, use 'Show Select All check box'.</p><p>The TreeList supports recursive node selection, which is enabled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Recursivetopic.aspx">SettingsSelection.Recursive</helplink> option. When recursive selection is enabled:</p><ul><li>a parent node is automatically selected, if all its child nodes are selected. Deselecting a child node automatically unselects its parent node(s);</li><li>selecting a parent node automatically selects all its children.</li></ul><p>In this demo, use the 'Recursive' check box to enable/disable recursive selection.</p>
            ]]>
          </Description>
          <HighlightedDescription>The Multiple Node Selection feature displays check boxes that allow end-users to select multiple nodes in the TreeList. This demo illustrates how you can allow a user to select all nodes, child nodes only, parent nodes only, or nodes above a particular level in the hierarchy.</HighlightedDescription>
          <SourceFile>~/Models/Departments.cs</SourceFile>
          <SourceFile>~/Views/Selection/MultipleNodeSelectionPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Summary" Title="Data Summary">
        <Demo Key="Summary" Title="Data Summary Via Built-in Functions" SeoTitle="Data Summary Via Built-in Functions">
          <Description>
            <![CDATA[
                <p>The TreeList enables you to calculate summary values for all values within a column or within a group of nodes, and display the result inside footer cells. The TreeList provides five built-in aggregate functions (count, max, min, etc.).</p>

                <p>Summaries can be displayed within Footer or Group Footer cells. The TreeList allows multiple summaries to be displayed within individual footer or group footer cells.</p>

                <p>For instance, in this demo, two summaries are displayed within the Budget column's footer cells. The first summary displays the maximum budget in this column and individual node groups (a tree branch). The second summary displays the sum of all values within the Budget column and individual node groups.</p>

                <p>The Footer is displayed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowFootertopic.aspx">Settings.ShowFooter</helplink> property is set to <b>true</b>. Group Footers are displayed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowGroupFootertopic.aspx">Settings.ShowGroupFooter</helplink> option is enabled.</p>

                <p>The TreeList stores its summary items within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_Summarytopic.aspx">Summary</helplink> collection.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/Departments.cs</SourceFile>
          <SourceFile>~/Views/Summary/SummaryPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="Editors" Url="MVCxDataEditorsDemos" Title="Data Editors" SeoTitle="Data Editors for ASP.NET MVC" NavItemTitle="Data Editors" OrderIndex="8" IsMvc="true">
      <Keywords>
        editing, form, input, devexpress.web.ASPxEditors, aspxeditors
      </Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument8964
      </DocUrl>

      <IntegrationImageUrl>~/Content/Editors.png</IntegrationImageUrl>

      <Overview Title="Overview">
        <Description>
          <![CDATA[
          <p>The DevExpress ASP.NET MVC Data Editors is a powerful collection of over 20 data edit and multi-purpose extensions available in both unbound and data-aware mode. The editors can be used for standalone data editing or within container extensions such as the GridView, TreeList, and FormLayout.</p>
          <p>Within the code fragments below you can find how to add various editors to your project.</p>
            <pageControl>
              <tabPage text="ListBox">
                <code lang="Html">
                  @Html.DevExpress().ListBox(settings => {
                      settings.Name = "listBox1";
                      settings.Width = Unit.Pixel(163);
                      settings.Properties.Items.Add("Ana Trujillo");
                      settings.Properties.Items.Add("Giovanni Rovelli");
                      settings.Properties.Items.Add("Jaime Yorres");
                      settings.Properties.Items.Add("John Steel");
                      settings.SelectedIndex = 1;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="ProgressBar">
                <code lang="Html">
                  @Html.DevExpress().ProgressBar(settings => {
                      settings.Name = "progressBar";
                      settings.Properties.ShowPosition = true;
                      settings.Position = 42;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="TrackBar ">
                <code lang="Html">
                  @Html.DevExpress().TrackBar(settings => {
                      settings.Name = "trackBar";
                      settings.Properties.MinValue = 0;
                      settings.Properties.MaxValue = 50;
                      settings.Properties.Step = 1;
                      settings.PositionStart = 10;
                      settings.Properties.ScalePosition = 
                        ScalePosition.LeftOrTop;
                      settings.Properties.LargeTickInterval = 10;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="DropDownEdit">
                <code lang="Html">
                  @Html.DevExpress().DropDownEdit(settings => {
                      settings.Name = "dropDownEdit";
                      settings.Properties.NullText = "Text area";
                      settings.SetDropDownWindowTemplateContent("<div style='padding: 10px 0 10px 3px'>Dropdown content</div>");
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="ComboBox">
                <code lang="Html">
                  @Html.DevExpress().ComboBox(settings => {
                      settings.Name = "comboBox";
                      settings.Properties.Items.Add("Ana Trujillo");
                      settings.Properties.Items.Add("Giovanni Rovelli");
                      settings.Properties.Items.Add("Jaime Yorres");
                      settings.Properties.Items.Add("John Steel");
                      settings.SelectedIndex = 2;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="SpinEdit">
                <code lang="Html">
                  @Html.DevExpress().SpinEdit(settings => {
                      settings.Name = "spinEdit";
                      settings.Properties.NumberFormat = 
                        SpinEditNumberFormat.Number;
                      settings.Properties.Increment = 100;
                      settings.Properties.MinValue = 0;
                      settings.Properties.MaxValue = 10000;
                      settings.Number = 100;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="DateEdit">
                <code lang="Html">
                  @Html.DevExpress().DateEdit(settings => {
                      settings.Name = "dateEdit";
                      settings.Properties.EditFormat = EditFormat.Custom;
                      settings.Date = new DateTime(2009, 11, 2, 9, 23, 0);
                      settings.Properties.TimeSectionProperties.
                        TimeEditProperties.EditFormatString = "hh:mm tt";
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="TextBox">
                <code lang="Html">
                  @Html.DevExpress().TextBox(settings => {
                      settings.Name = "textBox";
                      settings.Text = "123456";
                      settings.Properties.DisplayFormatString = "[ 00 - 00 - 00 ]";
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="ColorEdit">
                <code lang="Html">
                  @Html.DevExpress().ColorEdit(settings => {
                      settings.Name = "colorEdit";
                      settings.Color = Color.FromArgb(255, 153, 0);
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="TimeEdit">
                <code lang="Html">
                  @Html.DevExpress().TimeEdit(settings => {
                      settings.Name = "timeEdit";
                      settings.DateTime = new DateTime(2009, 11, 01, 15, 31, 34);
                      settings.Properties.ValidationSettings.ErrorDisplayMode = 
                        ErrorDisplayMode.None;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="ButtonEdit">
                <code lang="Html">
                  @Html.DevExpress().ButtonEdit(settings => {
                      settings.Name = "buttonEdit";
                      settings.Text = "Andy McKee - Rylynn";
                      settings.Properties.Buttons.Add();
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="RadioButtonList">
                <code lang="Html">
                  @Html.DevExpress().RadioButtonList(settings => {
                      settings.Name = "radioButtonList";
                      settings.Properties.RepeatDirection = 
                        RepeatDirection.Horizontal;
                      settings.Properties.Items.Add("MVC").Selected = true;
                      settings.Properties.Items.Add("WPF");
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="CheckBoxList">
                <code lang="Html">
                  @Html.DevExpress().CheckBoxList(settings => {
                      settings.Name = "checkBoxList";
                      settings.Properties.RepeatDirection = 
                        RepeatDirection.Horizontal;
                      settings.Properties.Items.Add("Wi-Fi").Selected = true;
                      settings.Properties.Items.Add("3G");
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="RadioButton">
                <code lang="Html">
                  @Html.DevExpress().RadioButton(settings => {
                      settings.Name = "radioButton";
                      settings.Text = "Click to change state";
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="Checkbox">
                <code lang="Html">
                  @Html.DevExpress().CheckBox(settings => {
                      settings.Name = "checkBox";
                      settings.Text = "Click to change state";
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="Memo">
                <code lang="Html">
                  @Html.DevExpress().Memo(settings => {
                      settings.Name = "memo";
                      settings.Text = "Confections - Desserts, candies, and sweet breads.";
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="Captcha">
                <code lang="Html">
                  @Html.DevExpress().Captcha(settings => {
                      settings.Name = "captcha";
                      settings.CallbackRouteValues = new { 
                        Controller = "Overview", Action = "CaptchaPartial" 
                      };
                      settings.CodeLength = 7;
                      settings.TextBox.Position = 
                       DevExpress.Web.ASPxEditors.Captcha.ControlPosition.Bottom;
                      settings.ValidationSettings.ErrorText = "The code is incorrect";
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="Calendar">
                <code lang="Html">
                  @Html.DevExpress().Calendar(settings => {
                      settings.Name = "calendar";
                      settings.Properties.ShowClearButton = true;
                      settings.Properties.ShowDayHeaders = true;
                      settings.Properties.ShowHeader = true;
                      settings.Properties.ShowTodayButton = true;
                      settings.Properties.ShowWeekNumbers = true;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="Button">
                <code lang="Html">
                  @Html.DevExpress().Button(settings => {
                      settings.Name = "button";
                      settings.Text = "Submit";
                      settings.UseSubmitBehavior = true;
                  }).GetHtml()
                </code>
              </tabPage>
              <tabPage text="TokenBox">
                <code lang="Html">
                  @Html.DevExpress().TokenBox(settings => {
                      settings.Name = "tokenBox";
                      settings.Properties.IncrementalFilteringMode = 
                        IncrementalFilteringMode.Contains;
                      settings.Properties.NullText = "Type Jaime";
                      settings.Properties.Items.Add("Ana Trujillo");
                      settings.Properties.Items.Add("Giovanni Rovelli");
                      settings.Properties.Items.Add("Jaime Yorres");
                      settings.Properties.Items.Add("John Steel");
                  }).GetHtml()
                </code>
              </tabPage>
            </pageControl>
            ]]>
        </Description>
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
        <SeeAlso Url="http://www.youtube.com/user/DeveloperExpress/" Title="Training Videos" />
        <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8964" Title="Documentation" />
        <KeyFeature Name="Advanced Masked Input">
          <Description>
            <![CDATA[
             Data Editors make data entry validation simple with support for masked input.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Display Value Formatting">
          <Description>
            <![CDATA[
             Editor display values can be formatted using standard formatting mechanisms and you can display input watermarks for editors with blank values.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Built-in Validation Engine">
          <Description>
            <![CDATA[
             With a few option settings, you can enable built-in data input validation. Automatic client and server-side validations are supported. The editors provide two built-in error indication options including error frames and error icons.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Help Text">
          <Description>
            <![CDATA[
             Data Editors can render the Help Text - a brief description of the purpose of the editor.
            ]]>
          </Description>
        </KeyFeature>
        <KeyFeature Name="Rich Client-Side Functionality">
          <Description>
            <![CDATA[
             A comprehensive client-side API is available for DevExpress ASP.NET MVC Data Editors. This functionality, coupled with the ability to handle a rich set of client events, allows you to maintain total control over behavior on the client side.
            ]]>
          </Description>
        </KeyFeature>
      </Overview>
      
      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Data Editors">
        <BannerTitle>
          Data Editors for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          Unmatched data editing options. Over 20 advanced editors that can be used either standalone or within container extensions.
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=YP-CAeBd7H8</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the ASPxEditors Library
        </DescriptionTitle>
        <Description>
          <![CDATA[
                <p>
                    This website demonstrates some of the many features and capabilities available to you when using our ASP.NET editors. These features include:
                </p>
                ]]>
        </Description>
      </Intro>
      <DemoGroup Key="Common" Title="Common Features">
        <Demo Key="ModelValidation" Title="Model Validation" SeoTitle="Data Editors for ASP.NET MVC - Model Validation">
          <Description>
            <![CDATA[
                    <p><b>What is "Model Validation"?</b>
                    See this MSDN article to learn how the model validation works: <a href="http://msdn.microsoft.com/en-us/library/ee256141(v=vs.100).aspx">How to: Validate Model Data Using DataAnnotations Attributes</a>.</p>

                    <p>This demo illustrates how user input can be easily validated using a model-based ASP.NET MVC validation approach. DevExpress MVC Extensions can be seamlessly integrated into the ASP.NET MVC validation infrastructure.</p>

                    <p>DevExpress MVC Editors have their own container for displaying validation error messages, which can be enabled via the <b>ShowModelErrors</b> property. This container allows you to manipulate validation messages more flexibly, then via the standard <b>Html.ValidationMessageFor</b> helper. You can control how errors should be displayed within editors by using settings exposed via the editor <b>ValidationSettings</b> property, such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorDisplayModetopic">ValidationSettings.ErrorDisplayMode</helplink>.</p>
                  ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument12058" Title="Online Documentation - Model Validation" />
          <SourceFile>~/Models/Validation.cs</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="UnobtrusiveValidation" Title="Unobtrusive Client Validation" SeoTitle="Data Editors for ASP.NET MVC - Unobtrusive Client Validation" 
              HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/UnobtrusiveValidation.png" HighlightedTitle="Support for MVC Validation Mechanism">
          <Description>
            <![CDATA[
            <p><b>What is "Unobtrusive Client Validation"?</b>
            See this blog post to learn how unobtrusive client validation works: <a href="http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html">Unobtrusive Client Validation in ASP.NET MVC 3</a>.</p>

            <p>This demo illustrates how user input can be easily validated using an unobtrusive ASP.NET MVC validation approach. DevExpress MVC Extensions can be seamlessly integrated into the ASP.NET MVC validation infrastructure.</p>

            <p>DevExpress MVC Editors have their own container for displaying validation error messages, which can be enabled via the <b>ShowModelErrors</b> property. This container allows you to manipulate validation messages more flexibly, then via the standard <b>Html.ValidationMessageFor</b> helper. You can control how errors should be displayed within editors by using settings exposed via the editor <b>ValidationSettings</b> property, such as <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorDisplayModetopic">ValidationSettings.ErrorDisplayMode</helplink>.</p>
          ]]>
          </Description>
          <HighlightedDescription>DevExpress MVC Extensions can be seamlessly integrated into the ASP.NET MVC validation infrastructure. This demo illustrates how user input can be easily validated using an unobtrusive ASP.NET MVC validation approach.</HighlightedDescription>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument12060" Title="Online Documentation - Unobtrusive Client Validation" />
          <SourceFile>~/Models/Validation.cs</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="jQueryValidation" Title="jQuery Client Validation" SeoTitle="Data Editors for ASP.NET MVC - jQuery Client Validation">
          <Description>
            <![CDATA[
            <p>This demo illustrates how user input can be easily validated using the jQuery Validation library. DevExpress MVC extensions provide you with full jQuery Client Validation support.</p>
            <p>In this demo, the jQuery Validation methods are used to specify validation rules for individual model fields on the client. You can find a full list of the validation methods on the jQuery Documentation page: <a href="http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods">Plugins/Validation - jQuery Wiki - List of built-in Validation methods</a>.</p>
            <p>The <b>rules:{...}</b> block contains field names with validation atributes.</p>
            <p>The <b>messages:{...}</b> block contains field names with related error messages that should be displayed to the end-users when the validation fails.</p>
            <p>The DevExpress MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument12360">ValidationSummary</helplink> extension is used to summarize validation errors from multiple editors and then display them in a single block.</p>
          ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument12061" Title="Online Documentation - jQuery Validation" />
          <SourceFile>~/Models/Validation.cs</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="BuiltInValidation" Title="Built-in Validation" SeoTitle="Built-in Validation">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the built-in flexibility and efficiency of our MVC data validation engine, allowing you to easily implement different validation scenarios. Validation settings can be customized for a given editor by using the editor's <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsValidationSettingstopic">Properties.ValidationSettings</helplink> property.
            </p><p>
                To define editor validation logic, use the following (can be combined together whenever required):
            </p><ul><li>
                    The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_RequiredFieldtopic.aspx">ValidationSettings.RequiredField</helplink> property can be used to force an editor to require input and give you the ability to display an error message if input is not received.
                </li><li>
                    The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_RegularExpressiontopic.aspx">ValidationSettings.RegularExpression</helplink> property allows you to validate an editor's value based upon a regular expression.
                </li><li>
                    An editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_Validationtopic.aspx">Validation</helplink> client event can be handled to setup custom editor validation. Review the code sample tabs within this demo, to learn how easy this really is.
                </li></ul><p>
                Editor validation is automatically triggered by changing the editor's value whenever the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ValidateOnLeavetopic.aspx">ValidationSettings.ValidateOnLeave</helplink> option is enabled. You can manually initiate editor validation by using the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_Validatetopic.aspx">Validate</helplink> client method or specific static client methods (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateEditorsInContainertopic.aspx">ASPxClientEdit.ValidateEditorsInContainer</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateEditorsInContainerByIdtopic.aspx">ASPxClientEdit.ValidateEditorsInContainerById</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateGrouptopic.aspx">ASPxClientEdit.ValidateGroup</helplink>).
            </p><p>
                When an editor fails validation logic, a specific error frame containing the error’s description can be displayed. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_Displaytopic.aspx">ValidationSettings.Display</helplink> property controls how the error frame occupies space around the editor. The error frame's appearance is customized via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorFrameStyletopic.aspx">ValidationSettings.ErrorFrameStyle</helplink> property. Based upon <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorDisplayModetopic.aspx">ValidationSettings.ErrorDisplayMode</helplink> settings, the description of an error can be represented within the error frame using an error image or text (or both). To define an error image, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorImagetopic.aspx">ValidationSettings.ErrorImage</helplink> property. The error text can be specified by using either the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorTexttopic.aspx">ValidationSettings.ErrorText</helplink> property or in the <b>Validation</b> event's handler.
            </p>]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument12059" Title="Online Documentation - Built-in Validation" />
          <SourceFile>~/Models/Validation.cs</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
        </Demo>
		<Demo Key="Caption" Title="Caption" SeoTitle="Caption - Show Label Prompt" IsNew="true">
          <Description>
            <![CDATA[
            <p>DevExpress Data Editors allow you to specify an editor's caption, which can be positioned and aligned relative to an editor. To customize the caption settings, you can use the following properties.</p>
            <ul>
            <li><b>Caption</b> – specifies the caption text.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettingsBase_Positiontopic">Position</helplink> – specifies the position of a caption related to the editor.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettingsBase_HorizontalAligntopic">HorizontalAlign</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettingsBase_VerticalAligntopic">VerticalAlign</helplink> – specify the horizontal and vertical alignment of a caption.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettingsBase_ShowColontopic">ShowColon</helplink> – specifies whether the colon sign is displayed after caption text.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettings_RequiredMarktopic">RequiredMark</helplink> – specifies the text displayed after a caption when the editor value is required.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettings_OptionalMarktopic">OptionalMark</helplink> – specifies the text displayed after a caption when the editor value is optional.</li>
            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditorCaptionSettings_RequiredMarkDisplayModetopic">RequiredMarkDisplayMode</helplink> – specifies which mark  should be displayed after a caption. This property can be set to the following values.
                <ul>
                    <li><b>Optional</b>. The optional mark is displayed after a caption.</li>
                    <li><b>Required</b>. The Required mark is displayed after a caption.</li>
                    <li><b>Hidden</b>. Neither the optional mark nor the required mark is displayed after a caption.</li>
                    <li><b>Auto</b>. If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsRequiredFieldValidationPattern_IsRequiredtopic">IsRequired</helplink> property is set to <b>true</b>, the required mark is displayed after a caption.</li>
                </ul> 
            </li>
            </ul>
            <p>This demo illustrates how a DevExpress Data Editor’s caption can be customized for editors of different types.</p>
            ]]>
          </Description>
        </Demo>
        <Demo Key="AjaxForm" Title="Ajax Form" SeoTitle="ASP.NET MVC Extensions - Ajax Form">
          <Description>
            <![CDATA[
            <p>DevExpress MVC extensions fully support Ajax Forms. </p>

            <p>This demo shows how to process a form asynchronously with results without a page reload. The partial view that contains DevExpress MVC Editors is reloaded only.</p>

            <p>When end user clicks the "Process" button, the form is sent to a server via an ajax callback without page reloading.</p>

            <p>In this demo, the Ajax Form is created using the <b>Ajax.BeginForm()</b> helper method.</p>

            <p>You can find more information about Ajax Forms at MSDN Reference: <a href="http://msdn.microsoft.com/en-us/library/dd492974(v=vs.108).aspx">AjaxExtensions.BeginForm Method</a>.</p>
          ]]>
          </Description>
          <SourceFile>~/Models/Validation.cs</SourceFile>
          <SourceFile>~/Views/Common/AjaxFormPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="EditorTemplates" Title="Editor Templates" SeoTitle="Data Editors for ASP.NET MVC - Editor Templates"
              HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/EditorTemplates.png" HighlightedTitle="Support for Model Editor Templates">
          <Description>
            <![CDATA[
            <p>DevExpress MVC extensions support standard the ASP.NET MVC templating system. This demo illustrates how to use DevExpress MVC Data Editors for building custom editor templates.</p>
            <p>The <b>Html.EditorFor()</b> method is used to display data editors for model data fields using the required template. This method consults the <b>UIHint</b> attribute value or data type to determine which template to render for the given property.</p>
            <p>All the custom editor template files are located in the <b>EditorTemplates</b> subfolder in the <b>~\Views\Shared</b> project folder. Each template file has the same name as a corresponding data type or <b>UIHint</b> attribute value. The template view code in this demo contains the label that displays the property name and the data editor that allows you to edit the required field.</p>
          ]]>
          </Description>
          <HighlightedDescription>DevExpress ASP.NET MVC extensions support standard the ASP.NET MVC templating system. This demo illustrates how to use DevExpress ASP.NET MVC Data Editors for building custom editor templates.</HighlightedDescription>
          <SourceFile>~/Models/Validation.cs</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
          <SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Common/EditorTemplates/String.cshtml</SourceFile>
          <SourceFile>~/Views/Common/EditorTemplates/FuelType.cshtml</SourceFile>
          <SourceFile>~/Views/Common/EditorTemplates/Mileage.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="Editors" Title="Editor Types">
        <Demo Key="Button" Title="Button">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates how the DevExpress ASP.NET MVC Button extension's appearance can be customized in different ways.
                </p>
                <p>
                    The Button content can consist of text and an image. The button text can be specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcButtonSettings_Texttopic">Text</helplink> property. A button image is determined by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsButtonImages_Imagetopic">Image</helplink> property, and is displayed next to the text at the position specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcButtonSettings_ImagePositiontopic">ImagePosition</helplink> property.
                </p>
                <p>
                    The easiest way to change the Button appearance is to apply a DevExpress <i>theme</i>. In this demo, a theme applied to the buttons can be specified using the <b>THEMES</b> link in the top-right corner.  
                </p>
                <p>
                    Button provides the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcButtonSettings_RenderModetopic">RenderMode</helplink> property, which specifies which element is used to render the button: a div element (the <b>Button</b> value) or a hyperlink (the <b>Link</b> value). Additionally, the Button extension can be rendered as a native input element if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsButtonControlStyles_Nativetopic">Native</helplink> property is set to <b>true</b>.
                </p>
                <p>
                    To provide the Button extension with a custom appearance, disable the DevExpress theming mechanism by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcSettingsBase_EnableThemingtopic">EnableTheming</helplink> property to <b>false</b>. Thereafter, you can modify every button element's appearance using the style properties provided by the extension, or by specifying the custom CSS class that is applied to the extension.
                </p>
            ]]>
          </Description>
          <SourceFile>~/Content/Editors/Button/Css/Appearance.css</SourceFile>
        </Demo>
        <Demo Key="CheckBoxList" Title="Check Box List" SeoTitle="Check Box List">
          <Description>
            <![CDATA[
                <p>
                The DevExpress Check Box List is a check box group that provides end-users with the ability to select multiple items. Its contents can be generated dynamically by binding the editor to a data source. You can also create items explicitly by manually populating the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditProperties_Itemstopic.aspx">Properties.Items</helplink> collection. For each list item, you can specify its caption and associated value.
                </p>
                
                <p>
                To define the Check Box List's selected items on the server side, you can use a list item's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic.aspx">Selected</helplink> property. On the client side, the editor exposes specific methods allowing you to manipulate item selection states with ease (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectItemstopic.aspx">SelectItems</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectItemstopic.aspx">UnselectItems</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectIndicestopic.aspx">SelectIndicies</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectIndicestopic.aspx">UnselectIndicies</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectValuestopic.aspx">SelectValues</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectValuestopic.aspx">UnselectValues</helplink>). You can also easily select/unselect all editor items by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectAlltopic.aspx">SelectAll</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectAlltopic.aspx">UnselectAll</helplink> client methods.
                </p>
                
                <p>
                The Check Box List layout is flexibly customized. You can display check box items in several columns (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatColumnstopic.aspx">Properties.RepeatColumns</helplink>), set a direction of items within the editor (horizontal or vertical through the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatDirectiontopic.aspx">Properties.RepeatDirection</helplink> property), and specify whether items are aligned within a table or rendered without any table structure (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatLayouttopic.aspx">Properties.RepeatLayout</helplink>). 
                </p>
              ]]>
          </Description>
        </Demo>
        <Demo Key="ComboBox" Title="Combo Box" SeoTitle="Autocomplete - ASP.NET MVC Combo Box Extension">
          <Keywords>autocomplete, dropdown, combobox</Keywords>
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the key features of the DevExpress MVC Combo Box – combining the functionality of a single-line text editor, button editor and dropdown list editor. Users can change the editor's value by selecting an item from the dropdown list or by entering new values into the editor's text box (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_DropDownStyletopic.aspx">Properties.DropDownStyle</helplink>).
            </p><p>
                The MVC Combo Box can be populated manually (using <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_Itemstopic.aspx">Properties.Items</helplink>) or generated dynamically via data binding (using <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcComboBoxExtension_BindListtopic.aspx">BindList</helplink>). To determine the selected item, you can use the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcComboBoxSettings_SelectedIndextopic.aspx">SelectedIndex</helplink> property. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsEditPropertiesBase_DisplayFormatStringtopic.aspx">Properties.DisplayFormatString</helplink> property can be used to specify the pattern used to format edit box display values when not focused.
            </p><p>
                The MVC Combo Box allows end-users to filter list items dynamically based upon text entered into the editor's text box on the client side (autocomplete filtering). Three filter modes are available - <b>None</b>, <b>StartsWith</b> and <b>Contains</b> (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_IncrementalFilteringModetopic.aspx">Properties.IncrementalFilteringMode</helplink>).
            </p><p>
                MVC Combo Box list items can be loaded from the server on demand (via callbacks) when the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_EnableCallbackModetopic.aspx">Properties.EnableCallbackMode</helplink> property is set to true. For instance, list items that are not currently displayed within the editor's dropdown window can be dynamically loaded if an end-user scrolls the list. In this mode, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_CallbackPageSizetopic.aspx">Properties.CallBackPageSize</helplink> property defines the number of items to be obtained from the server each time it's required. This mode ensures that the first page loads faster - only a few items need to be loaded initially.
            </p><p>
                The MVC ComboBox Editor allows list data to be represented across multiple columns. Multi-column mode is available for editors that obtain items from a data source. An editor's column collection can be defined and customized through <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_Columnstopic.aspx">Properties.Columns</helplink>. Each column within this collection must be bound to a data source field via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListBoxColumn_FieldNametopic.aspx">FieldName</helplink> property. You can also define a column's header caption, width, visibility state and other settings via column properties. All advanced features of the Combo Box Editor, such as incremental filtering and loading items on demand via callbacks are fully supported in multi-column mode. The selected item is represented within the Combo Box Editor's edit box, using a value whose format is based upon <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_TextFormatStringtopic.aspx">Properties.TextFormatString</helplink>.
            </p>
            ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Editors/ComboBoxPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Editors/MultiColumnComboBoxPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="LargeDataComboBox" Title="Combo Box with Large Database" SeoTitle="Combo Box with Large Database"
              HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/LargeDataComboBox.png" HighlightedTitle="Support for Data Binding to a Large Data Source">
          <Description>
            <![CDATA[
                <p>
                This demo shows how a specifically parameterized <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcComboBoxExtension_BindListtopic1800.aspx">BindList</helplink> method of the ComboBox editor can be used to display and filter the editor's data source containing a large amount of records (about 20 000). The <b>BindList</b> method's parameters refer to delegate methods that are declared as static methods within a model class. By providing implementation of these methods you can populate the editor's dropdown list with the required item portions (based on the currently applied filter criteria and the performed list scrolling) and obtain the data item corresponding to the editor's selected item.
                </p>

                <p>
                In this demo, the ComboBox doesn't perform filter operations on the entire database by itself. Instead, all the necessary data processing is delegated to the database server, which returns only small portions of the required data, displayed by the editor.
                </p>

                <p>
                This technique minimizes the application server's workload, and significantly reduces the application's response time. Using this technique, together with the 'Contains' filter mode of the ComboBox editor, allows you to deliver your customers with the ability to quickly and efficiently search against a huge amount of data.
                </p>

                <p>
                Being in an incremental filtering mode, the ComboBox has the capability to start filtering only after an end-user has typed a specific number of symbols in the editor's text box. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_FilterMinLengthtopic.aspx">FilterMinLength</helplink> property can be used to define the minimum length for the filter string input, after which filtering operations are initiated.
                </p>

                <p>
                This behavior is extremely useful when the ComboBox works with a large amount of data. In this case, performing filtration on each new symbol typed might not be sensible, due to the large size of the resulting data set, which might affect application performance. Thus, pausing the start of filter operations allows you to provide end-users with more sensible results, and to improve the performance of your page.
                </p>            
            ]]>
          </Description>
          <HighlightedDescription>This demo shows how a ComboBox editor can be used to display and filter the data source containing a large amount of records (about 20 000).</HighlightedDescription>
          <SourceFile>~/Models/LargeDatabase.cs</SourceFile>
          <SourceFile>~/Views/Editors/LargeDataComboBoxPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="DateEdit" Title="Date Edit" SeoTitle="Date and Time Editor">
          <Description>
            <![CDATA[
                  <p>
                  The DevExpress MVC Date Edit extension combines the functionality of a single-line text editor, button editor, dropdown calendar, and time editor. 
                  </p>
                  <p>
                  Specifying a date and time (by selecting it on the calendar or by manually typing it into the text box) changes the editor's edit value. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDateEditSettings_Datetopic.aspx">Date</helplink> property specifies the currently selected date.
                  </p>
                  <p>
                  The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_DisplayFormatStringtopic.aspx">Properties.DisplayFormatString</helplink> property is used to specify the format pattern used to display the editor's value within the edit box when the editor is not focused.
                  </p>
                  <p>
                  The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_NullTexttopic.aspx">NullText</helplink> property allows you to display a prompt in the edit box. The prompt is displayed if the editor's value is null and the editor is not focused, and it disappears when the editor receives focus. 
                  </p>
                  <p>
                  Set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_UseMaskBehaviortopic.aspx">Properties.UseMaskBehavior</helplink> property to <b>true</b> to support the masked input in the MVC Date Edit extension. Masks can be defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_EditFormatStringtopic.aspx">Properties.EditFormatString</helplink> property if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_EditFormattopic.aspx">EditFormat</helplink> property is set to Custom. 
                  </p>
                  <p>
                  By default, the editor's dropdown displays a calendar that allows end-users to select dates and navigate through individual months and years. Additionally, the drop-down can display the time section if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditTimeSectionProperties_Visibletopic.aspx">TimeSectionProperties.Visible</helplink> property is set to true. The time section displays the fully customizable clock and time editor. The time edit value can be formatted using a pattern specified via the <b>EditFormatString</b> property.
                  </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="DropDownEdit" Title="Dropdown Edit" SeoTitle="Dropdown Editor">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the use of the DevExpress MVC Dropdown Edit and List Box editors to emulate a combo box - allowing end-users to select multiple items from a dropdown list. The MVC Dropdown Edit includes an edit box to display editor values (defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDropDownEditSettings_Texttopic.aspx">Text</helplink> property) and a button to activate a dropdown whose contents can be templated (using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDropDownEditSettings_SetDropDownWindowTemplateContenttopic.aspx">SetDropDownWindowTemplateContent</helplink> method).  
            </p><p>
                In this demo, the DropDown Edit's <b>SetDropDownWindowTemplateContent</b> method creates an instance of the ListBox editor, whose <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListBoxProperties_SelectionModetopic.aspx">SelectionMode</helplink> property is set to <b>CheckColumn</b>. The DropDownEdit's <b>Text</b> property stores a list containing selected items (<b>Text</b> property values), delimited by semicolons. In addition to selecting items within the dropdown list, this demo allows you to select items by entering a semicolon-separated series of text items in the DropDown Edit's text box. If the entered text does not exist in the list, it is deleted from the text box.
            </p>]]>
          </Description>
        </Demo>
        <Demo Key="Calendar" Title="Calendar" SeoTitle="Calendar" IsUpdated="true">
          <Description>
            <![CDATA[
            <p>The DevExpress ASP.NET MVC Calendar extension can be used to display a calendar, allowing end-users to select dates via an intuitive calendar. The main features of the Calendar extension are listed below (along with the corresponding extension settings):</p>
            <ul>
            <li>Date highlighting (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_HighlightTodaytopic">HighlightToday</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_HighlightWeekendstopic">HighlightWeekends</helplink>);</li>
            <li>Full control over calendar element visibility (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_ShowClearButtontopic">ShowClearButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_ShowTodayButtontopic">ShowTodayButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_ShowDayHeaderstopic">ShowDayHeaders</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_ShowHeadertopic">ShowHeader</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_ShowWeekNumberstopic">ShowWeekNumbers</helplink>);</li> 
            <li>Single date selection (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCalendarSettings_SelectedDatetopic">SelectedDate</helplink>);</li> 
            <li>Multiple date selection (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_EnableMultiSelecttopic">EnableMultiSelect</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCalendarSettings_SelectedDatestopic">SelectedDates</helplink>);</li>
            <li>Disabled dates (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCalendarProperties_DisabledDatestopic">DisabledDates</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientCalendar_CustomDisabledDatetopic">CustomDisabledDate</helplink>).</li>
            </ul>
            <p>This demo illustrates the primary features of the Calendar extension. Use the options on the right to change the values of the corresponding Calendar properties, and see how they affect the extension.</p>
           ]]>
          </Description>
        </Demo>
        <Demo Key="Captcha" Title="Captcha" SeoTitle="Captcha">
          <Description>
            <![CDATA[
              <p>This demo illustrates the primary features of the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument15104">Captcha</helplink> extension for ASP.NET MVC.</p>
              <p>The <b>Captcha</b> is a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) extension used to verify that submitted data come from a human and not a robot or script. The Captcha can be, for instance, used to effectively prevent comment spam on blogs, automated voting in online polls, automatic creation of user accounts.</p>
              <p>The main functional elements of the Captcha extension are the <b>Challenge Image</b>, the <b>Refresh Button</b> and the <b>Text Box</b>. Captcha offers a flexible way to customize its appearance and layout by setting up these individual elements.</p> 
              <p>The <b>Challenge Image</b> is an automatically generated image representation of a random text. It presents a challenge to an end-user, which can be easily solvable by a human, but difficult for a computer. The Challenge Image's settings can be customized using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_ChallengeImagetopic">ChallengeImage</helplink> property. To define a set of characters from which a random text should be generated, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_CharacterSettopic">CharacterSet</helplink> property. You can control the number of characters to be displayed within the Challenge Image by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_CodeLengthtopic">CodeLength</helplink> property.</p>
              <p>Captcha's <b>Refresh Button</b> allows an end-user to change a challenge code displayed by the Challenge Image. This might be helpful if the currently displayed code is not quite clear to the user and cannot be easily recognized. To control the Refresh Button's content and appearance, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_RefreshButtontopic">RefreshButton</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCaptchaCaptchaStyles_RefreshButtontopic">Styles.RefreshButton</helplink> properties. If the callback route values are defined, a click on the Refresh Button sends a callback to generate and display another challenge code. To specify settings of a loading panel displayed during callbacks, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_LoadingPaneltopic">LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_LoadingPanelImagetopic">LoadingPanelImage</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_LoadingPanelStyletopic">LoadingPanelStyle</helplink> properties.</p>
              <p>The <b>Text Box</b> element of Captcha allows end-users to input text recognized from the Challenge Image. Entering the correctly recognized text proves a human interaction, when the submitted form is processed on the server. To customize the content and layout of the Text Box element, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_TextBoxtopic">TextBox</helplink> property. The element's appearance can be defined using properties available via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCaptchaCaptchaStyles_TextBoxtopic">Styles.TextBox</helplink> property. The text box element has a built-in validation mechanism whose behavior can be customized using the settings accessed via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_ValidationSettingstopic">ValidationSettings</helplink> property.</p>
              ]]>
          </Description>
          <SourceFile>~/Views/Editors/CaptchaPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ColorEditor" Title="Color Editor" SeoTitle="Color Editor">
          <Description>
        <![CDATA[ 
            <p>The DevExpress ASP.NET MVC ColorEdit extension allows end-users to set a color of web elements with ease. You can type the value directly into the editor's text box, select a color from the color palette in the editor's dropdown window, or use the optional color picker to select a custom color. End-users can specify colors by typing directly within the edit box by using longhand or shorthand hexadecimal notation (HEX) for RGB color values (#f0f, #D8D8D8, etc.), or by using standard HTML color names ("red", "green", etc.), which are then automatically converted to color codes. </p>
            <p>The custom color picker can be invoked by clicking the <b>Custom Color…</b> button in the color palette dropdown. The button is not displayed by default. You can show it by setting the <b>EnableCustomColors</b> property to <b>true</b>.</p> 
            <p>The number of color palette columns is controlled by the <b>ColumnCount</b> property. In this demo, use the <b>Column Count</b> spin edit to specify the column count. </p>
            <p>The <b>Palettes</b> combo box allows you to set one of the predefined color palettes, which is created programmatically using the properties and methods exposed by the <b>ColorEditItemCollection</b> collection (see the Controller code).</p> 
            <p>In this demo, ColorEdit instances are used to specify background and foreground colors for the header and content elements of an RoundPanel extension. On the server side, the selected color is applied to the corresponding property of the RoundPanel extension.</p>
        ]]>
          </Description>
          <SourceFile>~/Models/RoundPanelAppearance.cs</SourceFile>
        </Demo>
        <Demo Key="ListBox" Title="List Box">
          <Description>
            <![CDATA[
            <p>The DevExpress ASP.NET MVC List Box editor allows multiple list items to be selected at the same time. Selection behavior is controlled by the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListBoxProperties_SelectionModetopic">SelectionMode</helplink> property. The following selection modes are available within the ListBox editor:</p>
            <ul>
            <li><b>Single</b> - Only one item can be selected within the editor.</li>
            <li><b>Multiple</b> - Multiple items can be selected within the editor. End-users can apply multi-selection by clicking list items while pressing CTRL (to add an individual item) or SHIFT (to select a range of items). </li>
            <li><b>CheckColumn</b> - Multiple items can be selected within the editor. End-users can apply multi-selection by clicking list items (the SHIFT key can also be used in this mode to select a range of items). </li>
            </ul>
            <p>When multiple selection is enabled, the selection state of individual items can be specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic">Selected</helplink> property of the item, and a collection of selected items can be obtained by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcListBoxExtension_GetSelectedValues%5BT%5Dtopic">GetSelectedValues</helplink> static method. In addition, item selection can be applied on the client side by using a specific client API (the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_GetSelectedItemstopic">GetSelectedItems</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_SelectItemstopic">SelectItems</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_UnselectItemstopic">UnselectItems</helplink> client methods).</p>
            <p>Note that in multiple selection mode, all the ListBox features are supported, with the exception of loading items on demand via callbacks.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/Editors/ListBoxPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="RadioButtonList" Title="Radio Button List" SeoTitle="Radio Button List">
          <Description>
            <![CDATA[
                <p>
                The DevExpress Radio Button List is a radio button group that provides end-users with the ability to select a single item at a time. Its contents can be generated dynamically by binding the editor to a data source. You can also create items explicitly by manually populating the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditProperties_Itemstopic.aspx">Properties.Items</helplink> collection. For each list item, you can specify its caption and associated value.
                </p>
                
                <p>
                To define the Radio Button List's selected item on the server side, you can use a list item's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic.aspx">Selected</helplink> property. On the client side, the editor exposes specific methods allowing you to manipulate the selected item with ease (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_GetSelectedItemtopic.aspx">GetSelectedItem</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_SetSelectedItemtopic.aspx">SetSelectedItem</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_GetSelectedIndextopic.aspx">GetSelectedIndex</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_SetSelectedIndextopic.aspx">SetSelectedIndex</helplink>).
                </p>
                
                <p>
                The Radio Button List layout is flexibly customized. You can display check box items in several columns (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatColumnstopic.aspx">Properties.RepeatColumns</helplink>), set a direction of items within the editor (horizontal or vertical through the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatDirectiontopic.aspx">Properties.RepeatDirection</helplink> property), and specify whether items are aligned within a table or rendered without any table structure (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatLayouttopic.aspx">Properties.RepeatLayout</helplink>). 
                </p>
            ]]>
          </Description>
          <SourceFile>~/Views/Editors/RadioButtonList.cshtml</SourceFile>
        </Demo>
        <Demo Key="SpinEdit" Title="Spin Edit" SeoTitle="Numeric Spin Editor">
          <Description>
            <![CDATA[
            <p>
                This demo illustrates the primary features of the DevExpress Spin Edit - allowing end-users to edit numeric values with ease. The editor consists of an edit region and one or two pairs of spin buttons which can be used to adjust the numerical value. The editor's value is specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSpinEditSettings_Numbertopic.aspx">Number</helplink> property.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_MinValuetopic.aspx">Properties.MinValue</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_MaxValuetopic.aspx">Properties.MaxValue</helplink> properties can be used to define the editor's minimum and maximum allowed values, limiting end-user input to a specified range. These properties limit the <b>Number</b> property value.
            </p><p>
                The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_DisplayFormatStringtopic.aspx">Properties.DisplayFormatString</helplink> property is used to specify the format pattern used to represent the editor's value within the edit box when the editor is not focused. By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_NullTexttopic.aspx">Properties.NullText</helplink> property, a prompt can be displayed in the editor's edit box. The specified text is displayed if the editor's value is null and the editor is not focused. The prompt text disappears when the editor receives focus.
            </p><p>
                <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_NumberTypetopic.aspx">Properties.NumberType</helplink> determines whether the MVC Spin Edit uses float or integer editing mode. In integer mode, float value input is disabled and float values displayed within the editor are automatically rounded once modified. In float mode, culture specific separators are supported, allowing decimal separators to display unique values.
            </p><p>
                When an end-user presses a small or large spin button, the <b>Number</b> property value is incremented or decremented by the amount specified via <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_Incrementtopic.aspx">Properties.Increment</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_LargeIncrementtopic.aspx">Properties.LargeIncrement</helplink> properties respectively. The visibility of small and large spin buttons is managed using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinButtons_ShowIncrementButtonstopic.aspx">SpinButtons.ShowIncrementButtons</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinButtons_ShowLargeIncrementButtonstopic.aspx">SpinButtons.ShowLargeIncrementButtons</helplink> properties.
            </p>]]>
          </Description>
        </Demo>
        <Demo Key="TextBox" Title="Text Box" SeoTitle="Text Box">
          <Keywords>mask, maskedit, masked input</Keywords>
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates the primary features of the DevExpress MVC <b>Text Box</b> - a single-line text input editor.
                </p>
                <p>
                    The text displayed in the edit box can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTextBoxSettings_Texttopic.aspx">Text</helplink> property. 
                    The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsEditPropertiesBase_DisplayFormatStringtopic.aspx">DisplayFormatString</helplink> property specifies the pattern used to format an editor's value for display purposes when not focused.
                </p>
                <p>
                    The <b>Text Box</b> editor supports masked input - mask settings can be accessed via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTextBoxProperties_MaskSettingstopic.aspx">MaskSettings</helplink> property. 
                    A mask expression can be specified via <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsMaskSettings_Masktopic.aspx">MaskSettings.Mask</helplink>.
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="TokenBox" Title="Token Box" SeoTitle="Autocomplete - The Token Box Extension for ASP.NET MVC">
          <Keywords>autocomplete</Keywords>
          <Description>
            <![CDATA[
                <p>The DevExpress ASP.NET MVC Token Box editor provides the ability to auto complete values from a predefined list. An end-user can select a value from the dropdown window list or type it manually. This demo illustrates the main features available to you when using the TokenBox editor.</p>
                <p>Use the items on the right to modify individual property values and see the result in the editor. The descriptions of the utilized properties are listed below.</p>
                <p><b>AllowCustomTokens</b> – specifies whether or not the tokens, which are not contained in the bound data source, can be specified in the editor.</p>
                <p><b>ShowDropDownOnFocus</b> – controls the dropdown window visibility when the editor is focused. The available values are listed below.</p>
                <ul>
                <li>Auto – the dropdown window is displayed when an end-user starts typing in the editor.</li>
                <li>Always – the dropdown window is always displayed when the editor is focused.</li>
                <li>Never – the dropdown window is never displayed.</li>
                </ul>
                <p><b>IncrementalFilteringMode</b> – specifies which of the filtering mode is applied to the editor dropdown window items. </p>
                <ul>
                <li>Contains – the editor is filtered for list items that contain the typed search string. </li>
                <li>StartsWith – the editor is filtered for list items that begin with the typed search string.</li>
                <li>None – filtering is not applied to editor list items. </li>
                </ul>
                <p>Start typing in the token box to invoke the dropdown window containing the appropriate values. To remove a value from the editor, click the corresponding item delete button.</p>
            ]]>
          </Description>
          <SeeAlso Url="http://www.youtube.com/watch?v=qy3fLSgYTHY" Title="DevExpress ASP.NET MVC: The TokenBox Extension" />
        </Demo>
        <Demo Key="TrackBar" Title="Track Bar" SeoTitle="Track Bar - Single-Value and Range Selector Slider for ASP.NET MVC">
          <Keywords>slider, range</Keywords>
          <Description>
            <![CDATA[
<p>
TrackBar is a slider that provides end-users with fast and easy visual data selection capabilities. With TrackBar, end-users can select single values or value ranges by positioning drag handles within a span of values limited by a developer. End-users can position a drag handle over the required editor value in the following manner:
</p>
<ul>
<li>By clicking on the track or scale,</li>
<li>By clicking on decrement or increment buttons,</li>
<li>Via the mouse wheel,</li>
<li>By dragging the handle and dropping it on the required position,</li>
<li>By pressing arrow keys.</li>
</ul>

<p>
This demo illustrates the primary features of TrackBar.
</p>
<ul>
<li>
<b>Value limits and position</b><br/>
You can define a value range to be visualized in TrackBar (within which end-users are allowed to select values) by specifying the minimum and maximum limits via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_MinValuetopic.aspx">Properties.MinValue</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_MaxValuetopic.aspx">Properties.MaxValue</helplink> properties. The current editor value (that is the drag handle position) can be controlled by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTrackBarSettings_Positiontopic.aspx">Position</helplink> property. 
</li>
<li>
<b>Scale customization</b><br/>
TrackBar's scale visualizes a value span limited by the <b>Properties.MinValue</b> and <b>Properties.MaxValue</b> properties. The scale is fully customizable. You can display it on both sides of the track or just on one track side, or even hide the scale - via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ScalePositiontopic.aspx">Properties.ScalePosition</helplink> property. The scale can display tick marks (large and small) and their labels (scale labels). Using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_LargeTickIntervaltopic.aspx">Properties.LargeTickInterval</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_SmallTickFrequencytopic.aspx">Properties.SmallTickFrequency</helplink> properties you can flexibly define the interval between large ticks and specify how frequently small ticks should fill a single large interval, respectively. You can also control whether or not all tick marks should be of the same size, by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_EqualTickMarkstopic.aspx">Properties.EqualTickMarks</helplink> property.
</li>
<li>
<b>Items mode</b><br/>
Within TrackBar, you can display custom items instead of automatically generated scale marks. Populate the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_Itemstopic.aspx">Properties.Items</helplink> collection to activate TrackBar's items display mode. This collection can be filled manually or populated automatically through binding the editor to a data source. For each item, the text and associated value can be defined (via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarItem_Texttopic.aspx">TrackBarItem.Text</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarItem_Valuetopic.aspx">TrackBarItem.Value</helplink> properties). You can specify the type of item values by using the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ValueTypetopic.aspx">Properties.ValueType</helplink> property. Items from the <b>Properties.Items</b> collection define the possible positions to which end-users can move drag handles within TrackBar. When an end-user selects an item, the item's index is assigned to the editor's <b>Position</b> property.
</li>
<li>
<b>Range Selection</b><br/>
TrackBar supports a range selection mode. The editor can display two draggable handles, thus allowing end-users to easily select a range of values. Range selection is allowed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_AllowRangeSelectiontopic.aspx">Properties.AllowRangeSelection</helplink> property is enabled. In this mode, you can use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTrackBarSettings_PositionStarttopic.aspx">PositionStart</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTrackBarSettings_PositionEndtopic.aspx">PositionEnd</helplink> properties to obtain or define the selected range limits.
</li>
<li>
<b>Orientation and direction</b><br/>
Track bar supports two orientation modes - horizontal and vertical.  This can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_Orientationtopic.aspx">Properties.Orientation</helplink> property. TrackBar elements can be rendered in a normal or reversed mode that is controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_Directiontopic.aspx">Properties.Direction</helplink> property. In the reversed mode, the TrackBar direction (from <b>Properties.MinValue</b> to <b>Properties.MaxValue</b>) turns from left to right to right to left (or from up to down to down to up if TrackBar's orientation is vertical).
</li>
<li>
<b>Value tooltip</b><br/>
When an end-user changes the editor value, TrackBar is able to automatically display a tooltip indicating the current value (or value range). You can control the visibility of value tooltips and even define at which track bar side they should appear, by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ValueToolTipPositiontopic.aspx">Properties.ValueToolTipPosition</helplink> property. The value tooltip text content's format is fully customizable through the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ValueToolTipFormatStringtopic.aspx">Properties.ValueToolTipFormatString</helplink> property.
</li>
 </ul>
            ]]>
          </Description>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="DockAndPopups" Url="MVCxDockAndPopupsDemos" Title="ASP.NET MVC Dock and Modal Popups" SeoTitle="ASP.NET MVC Dock and Modal Popups" NavItemTitle="Dock and Modal Popups" OrderIndex="9" IsMvc="true">
      <Keywords>
        docking, popup
      </Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument7896
      </DocUrl>

      <IntegrationImageUrl>~/Content/Doc_and_Modal_Popups.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Dock and Modal Popups">
        <BannerTitle>
          Docking and Popup Windows for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          A collection of extensions that allow you to create interactive, touch-enabled web applications such as web dashboards
        </BannerText>
        <BannerImageUrl>
          ~/Content/VideoBanner.png
        </BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=kglFanQjKM4</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the ASPxperience Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>
                  This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>. 
                  These features include: 
              </p>
              ]]>
        </Description>
      </Intro>
      <DemoGroup Key="Docking" Title="Docking" SeoTitle="ASP.NET MVC Docking Extension">
        <Overview Title="Overview">
          <DescriptionTitle>About Docking</DescriptionTitle>
          <Description>
            <![CDATA[
            <p>The DevExpress ASP.NET MVC Docking Suite with built-in support for touch screens allows you to easily implement and manage draggable web panels within your web application.</p>
            <p>The Docking Suite contains three extensions: DockPanel, DockZone and DockManager. They allow you to manage content placeholders (dock panels), which can be moved by end-users between specific areas (dock zones) within a web page. A dock panel can either be docked to a dock zone or made to float. Dock zones can be placed at any part of a page; their orientation and size are fully customizable. Dock manager allows you to provide centralized programmatic control of all dock panels and dock zones contained within a page.</p>
            <p>The code sample below demonstrates how to add the Docking extensions to your project.</p>
            <p>View code:</p>
            <code lang="html">
              @Html.DevExpress().DockPanel(settings => {
                  settings.Name = "panel";
                  settings.OwnerZoneUID = "zone1";
                  settings.HeaderText = "2D Bubble";
                  settings.Height = 220;
                  settings.Width = 250;
                  settings.ShowCloseButton = false;
                  settings.SetContent(() => {
                      ViewContext.Writer.Write(
                          "<img alt=\"\" style=\"height:140px;\" src=\"" + 
                            Url.Content("~/Images/2DBubble.png") + "\"/>"
                      );
                  });
              }).GetHtml()
              @Html.DevExpress().DockZone(settings => {
                  settings.Name = "zone1";
                  settings.Height = 220;
                  settings.Width = 250;
              }).GetHtml()
            </code>
        ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11473" Title="Documentation" />
          <KeyFeature Name="Customizable Behavior">
            <Description>
              <![CDATA[
             You can specify whether or not end-users can drag, resize, and dock or undock a panel.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Forbidden zones">
            <Description>
              <![CDATA[
             Forbidden zones can be specified for a panel, allowing you to control the panel's ability to selectively dock to specific zones. Different appearances for the allowed and forbidden zone states can be specified.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Customizable Appearance">
            <Description>
              <![CDATA[
             You can fully customize the appearance of a panel's header, footer and content sections.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="AJAX Support ">
            <Description>
              <![CDATA[
             Panel content can be loaded on demand via callbacks.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Client-Side API">
            <Description>
              <![CDATA[
             You can use a client-side API to show, hide, dock, and undock panels, specify their position relative to other HTML elements, and change their content.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Keywords>Layout, yahoo, dashboard, zones, DockPanel, DockZone, DockManager</Keywords>
        <Demo Key="Widgets" Title="Widgets" SeoTitle="Widgets" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Docking.png" HighlightedTitle="Docking - Widgets">
          <Keywords>Widget, widgetpage, widgetspage</Keywords>
          <Description>
            <![CDATA[
              <p>This demo illustrates how a typical scenario - implementation of web gadgets on a page - can be realized using docking components provided by the DevExpress MVC Docking Extension suite.</p>
              <p>The Docking suite offers three extensions - DockPanel, DockZone, and DockManager. They allow you to manage content placeholders (dock panels), which can be moved by end-users between particular areas (dock zones) within a web page. A dock panel can either be docked to a dock zone or made  floating. Dock zones can be placed on any part of a page and their orientation and size are fully customizable. DockManager allows you to provide centralized programmatic control of all dock panels and dock zones contained within a page.</p>
                      ]]>
          </Description>
          <HighlightedDescription>Three extensions are used to manage dock panels, so that end-users can move these panels in an application and customize their view. This demo illustrates how web gadgets are implemented using these components included in the ASP.NET MVC Docking Extensions.</HighlightedDescription>
          <SourceFile>~/Views/Docking/CalendarWidgetPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/DateTimeWidgetPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/MailWidgetPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/TradingWidgetPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/WeatherWidgetPartial.cshtml</SourceFile>
          <SourceFile>~/Models/Trading.cs</SourceFile>
          <SourceFile>~/Models/WeatherWidget.cs</SourceFile>
        <SourceFile>~/Content/Docking/CSS/Widgets.css</SourceFile>
        </Demo>
        <Demo Key="ForbiddenZones" Title="Forbidden Zones" SeoTitle="Forbidden Zones">
          <Description>
            <![CDATA[
                  <p>This example demonstrates the forbidden zones feature allowing you to control a panel's ability to selectively dock to particular zones.</p>
                  <p>Using a dock panel's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockPanelSettings_ForbiddenZonestopic.aspx">ForbiddenZones</helplink> property, you can specify disallowed zones for the panel - the zones to which the panel cannot be docked. It is also possible to provide different appearances for the allowed and forbidden zone states by using a dock zone's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingDockZoneStyles_DockingAllowedStyletopic.aspx">DockingAllowedStyle</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingDockZoneStyles_DockingForbiddenStyletopic.aspx">DockingForbiddenStyle</helplink> properties. These appearances are used to highlight zones during panel dragging and to indicate whether a particular zone is allowed or disallowed for panel docking.</p>
              ]]>
          </Description>
        <SourceFile>~/Content/Docking/CSS/ForbiddenZones.css</SourceFile>
        </Demo>
        <Demo Key="Callbacks" Title="AJAX" SeoTitle="AJAX">
          <Description>
            <![CDATA[
              <p>The DockPanel extension has the capability to load panel content on demand via callbacks. Several content loading modes are available via the following settings of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockPanelSettings_LoadContentViaCallbacktopic.aspx">LoadContentViaCallback</helplink> property.</p>
              <ul>
              <li>None - The content is always (initially) rendered inside a dock panel (the default behavior).</li>
              <li>OnPageLoad - Loading of panel contents starts immediately after an entire page has been loaded.</li>
              <li>OnFirstShow - Loading of panel contents starts when a dock panel is invoked for the first time.</li>
              <li>OnDock - Loading of panel contents starts every time a panel has been docked to a dock zone.</li>
              <li>OnDockStateChange - Loading of panel contents starts every time a panel's dock state has been changed (that is a docked panel starts floating or a floated panel docks to a zone).</li>
              <li>OnFloating - Loading of panel contents starts every time a panel has been made floated.</li>
              </ul>
              <p>Using a delayed load of panel contents, you can enhance the response time of your web page on its initial load. You can also update the content of a dock panel programmatically on demand.</p>
              <p>Note that in this example, we purposely pause callback processing on the server side for half a second in order to make the loading panel visible during this time.</p>
                  ]]>
          </Description>
          <SourceFile>~/Views/Docking/CallbacksPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/DesignDepartmentEmployeesPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/DevelopmentDepartmentEmployeesPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/FloatModeContentPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events" SeoTitle="Client-Side Events">
          <Description>
            <![CDATA[
              <p>This sample demonstrates the capabilities of our client-side event management technology. Play with dock panels to initiate client-side events. The main extension-specific client events related to panel docking are traced in this demo.</p>
              <p>All extensions included in the Docking suite (i.e. DockPanel, DockZone and DockManager) provide advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client, and cover all the key elements of the panel docking functionality. So, they give you the ability to completely control the client-side behavior of dock panels and zones.</p>
              <p>The following client events are demonstrated in this demo:</p>
              <ul>
              <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic.aspx">Init</helplink> (common for DockPanel, DockZone and DockManager) - Occurs on the client side after a client object has been initialized, but prior to its display on the browser.</li>
              <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_StartDraggingtopic.aspx">StartDragging</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_EndDraggingtopic.aspx">EndDragging</helplink> (specific to DockPanel); <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_StartPanelDraggingtopic.aspx">StartPanelDragging</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_EndPanelDraggingtopic.aspx">EndPanelDragging</helplink> (specific to DockManager) - Allow you to respond to the corresponding end-user actions performed on a panel.</li>
              <li><b>BeforeDock</b>, <b>AfterDock</b> (common for DockPanel, DockZone and DockManager) - Fire before and after a panel is docked to a zone; you are able to cancel panel docking, if required.</li>
              <li><b>BeforeFloat</b>, <b>AfterFloat</b> (common for DockPanel and DockManager) - Fire before and after a panel is made floating; you are able to cancel making a panel floating if required.</li>
              <li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_PopUptopic.aspx">PopUp</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_CloseUptopic.aspx">CloseUp</helplink> (specific to DockPanel); <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PanelPopUptopic.aspx">PanelPopUp</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PanelCloseUptopic.aspx">PanelCloseUp</helplink> (specific to DockManager) - Allow you to respond to invoking or closing a dock panel.</li>
              </ul>
                  ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality" SeoTitle="Client-Side Functionality">
          <Description>
            <![CDATA[
                  <p>This example demonstrates how to manipulate dock panels programmatically on the client using our extended client-side functionality. Client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_EnableClientSideAPItopic.aspx">EnableClientSideAPI</helplink> property is set to <b>true</b>, or if there is a handler assigned to any client-side event. Once set, an individual client control object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.</p>              
                  <p>This demo allows the selected dock panel's characteristics to be dynamically modified via client code depending upon the rightmost panel's settings.</p>
                  <p>In this demo, an individual dock panel's visibility and visible index are modified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetVisibletopic.aspx">SetVisible</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_SetVisibleIndextopic.aspx">SetVisibleIndex</helplink> client methods. A panel's dock state (docked or float) is obtained using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_IsDockedtopic.aspx">IsDocked</helplink> method. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_Docktopic.aspx">Dock</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_MakeFloattopic.aspx">MakeFloat</helplink> client methods are used to dock a panel or make it floating.</p>
              ]]>
          </Description>
        <SourceFile>~/Content/Docking/CSS/ClientSideAPI.css</SourceFile>
        </Demo>
        <Demo Key="LayoutManagement" Title="Layout Management" SeoTitle="Layout Management">
          <Description>
            <![CDATA[
                    <p>
                    The DockManager extension allows you to respond to end-user operations on panels and zones on a page and manage the layout.
                    </p>
                    <p>
                    In this demo, extensions from the Docking suite are used for two different purposes: to visualize data blocks on a page using a fixed layout, and to customize the layout of these data blocks via an external page. Both pages (presentation and customization) use the same set of DevExpress docking extensions. The dock panel layout defined in the customization page is preserved and synchronized with the presentation page using the DockManager's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockManagerSettings_ClientLayouttopic.aspx">ClientLayout</helplink> event. 
                    </p>
                    <p>
                    To save layout changes, the client-side <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PerformCallbacktopic.aspx">PerformCallback</helplink> method should be called in the client-side <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_AfterDocktopic.aspx">AfterDock</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_AfterFloattopic.aspx">AfterFloat</helplink> events. In this demo, only the <b>AfterDock</b> event is handled, because panels can only be in a docked state (the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockPanelSettings_AllowedDockStatetopic.aspx">AllowedDockState</helplink> property is set to <b>DockedOnly</b>).
                    </p>
                    <p>Note:</p>
                    <ul>
                    <li>The DockManager that sends a callback to the server for saving a layout should be defined in a separate partial view, like all callback-aware extensions.</li>
                    <li>To obtain complete information about all DockPanel and DockZone extensions on the page, DockManager should be rendered after these extensions.</li>
                    </ul>
              ]]>
          </Description>
          <SourceFile>~/Views/Docking/EditLayout.cshtml</SourceFile>
          <SourceFile>~/Views/Docking/EditLayoutPartial.cshtml</SourceFile>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11477" Title="Layout Management" />
        </Demo>
      </DemoGroup>
      <DemoGroup Key="LoadingPanel" Title="Loading Panel" SeoTitle="ASP.NET MVC Loading Panel Extension">
        <Demo Key="Example" Title="Example" SeoTitle="Example" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/LoadingPanel.png" HighlightedTitle="Loading Panel - Example">
          <Description>
            <![CDATA[
                <p>
                 This demo demonstrates the use of the DevExpress MVC LoadingPanel Extension working in modal mode.
                </p>
                <p>
                 Depending on the check box setting, the loading panel can be displayed over either the entire page or a specified HTML element, which is controlled by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcLoadingPanelSettings_ContainerElementIDtopic.aspx">ContainerElementID</helplink> property.
                </p>
                <p>
                 In this demo, the loading panel is displayed and hidden dynamically via client code in response to clicking the 'Show Loading Panel' button.
                </p>
              ]]>
          </Description>
          <HighlightedDescription>Display a “loading” message to an end-user when required, using the Loading Panel extension. This demo shows how the LoadingPanel can display and hide a loading panel via client code in response to an end-user’s actions.</HighlightedDescription>
          <SourceFile>~/Views/LoadingPanel/ExamplePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="PopupControl" Title="Popup Window" SeoTitle="ASP.NET MVC Popup Window Extension">
        <Keywords>dialog</Keywords>
        <Overview Title="Overview">
          <Description>
            <![CDATA[
            <p>PopupControl makes it easy to display fully customizable popup windows and hints within your web application.</p>
            <p>If you need to display a popup window when end-users click an HTML element, then you only need to specify that element's ID - the rest is done automatically.</p>
            <p>View code:</p>
            <code lang="html">
              @Html.DevExpress().PopupControl(settings => {
                  settings.Name = "pcOverview";
                  settings.PopupElementID = "popupArea";
                  settings.AllowDragging = true;
                  settings.ShowOnPageLoad = true;
                  settings.CloseAction = CloseAction.CloseButton;
                  settings.HeaderText = "Area of Countries";
                  settings.SetContent(() => {
                      ViewContext.Writer.Write(
                          "<img src=\"" + Url.Content("~/Images/CountriesArea.png") + "\" alt=\"Area of Countries\" />"
                      );
                  });
              }).GetHtml()
              <div id="popupArea" style="height: 300px;">Click here to invoke a popup window</div>
            </code>
        ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8971" Title="Documentation" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             The Popup extension can retrieve window or content information from a data source.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Loading Content via AJAX">
            <Description>
              <![CDATA[
             The Popup Extension has an ability to load the content of popup windows on demand.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Template Technology">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within PopupControl, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Content URL">
            <Description>
              <![CDATA[
             The Popup extension allows the display of other web page content specified by their URLs.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Modal Mode">
            <Description>
              <![CDATA[
             You can use the Popup extension to display fully customizable modal dialogs.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for PopupControl. This functionality, coupled with the ability to handle events on the client side, gives you full control over the extension's behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
          </Overview>
        <Demo Key="Features" Title="Features" IsUpdated="true">
          <Keywords>PopupHorizontalAlign, position, header, footer, PopupVerticalAlign, Opacity, allowdragging, allowresize, sizegrip</Keywords>
          <Description>
            <![CDATA[
                <p>
                    This demo allows you to use many of the features provided by the DevExpress MVC Popup Extension. 
                    Use options on the right to change various layout and behavior property settings and click Apply to assign them. 
                    To invoke the MVC Popup Extension, click the PopupElement button displayed on the left.
                </p>
                <p>                                    
                    Available options include:
                </p>
                <ul>
                    <li>                    
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowCloseButtontopic.aspx">ShowCloseButton</helplink>. This option specifies whether a button is displayed within a popup window's header allowing end-users to close the window.
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowShadowtopic.aspx">ShowShadow</helplink>. This option applies a shadow effect to popup windows.
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowFootertopic.aspx">ShowFooter</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowHeadertopic.aspx">ShowHeader</helplink>. Use these options to toggle the visibility of a popup window's header and footer.
                    </li>
                    <li>
                        <p>
                            <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupHorizontalAligntopic.aspx">PopupHorizontalAlign</helplink>. This option specifies the horizontal alignment of a popup window relative to the corresponding web control/HTML element. Option values include:
                        </p>
                        <ul>
                            <li>
                                <b>NotSet</b>. A popup window is displayed on the x-coordinate of the mouse cursor position.
                            </li>
                            <li>
                                <b>OutsideLeft</b>. A popup window is displayed to the left of the corresponding HTML element, so that the x-coordinate of the window's right border equals the x-coordinate of the element's left border.
                            </li>
                            <li>
                                <b>LeftSides</b>. A popup window is displayed, so that the left border x-coordinates of the window and its corresponding element are equal.
                            </li>
                            <li>
                                <b>RightSides</b>. A popup window is displayed, so that the right border x-coordinates of the window and its corresponding element are equal.
                            </li>
                            <li>
                                <b>OutsideRight</b>. A popup window is displayed to the right of the corresponding HTML element, so that the x-coordinate of the window's left border equals the x-coordinate of the element's right border.
                            </li>
                        </ul>
                    </li>
                    <li>
                        <p>
                            <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupVerticalAligntopic.aspx">PopupVerticalAlign</helplink>. This option specifies the vertical alignment of a popup window with respect to the corresponding web control/HTML element. Choose one of the following option values:
                        </p>
                        <ul>
                            <li>
                                <b>NotSet</b>. A popup window is displayed on the y-coordinate of the mouse cursor position.
                            </li>
                            <li>
                                <b>Above</b>. A popup window is displayed above the corresponding HTML element, so that the y-coordinate of the window's bottom border equals the y-coordinate of the element's top border.
                            </li>
                            <li>
                                <b>TopSides</b>. A popup window is displayed, so that the top border y-coordinates of the window and its corresponding element are equal to one another.
                            </li>
                            <li>
                                <b>BottomSides</b>. A popup window is displayed, so that the bottom border y-coordinates of the window and its corresponding element are equal.
                            </li>
                            <li>
                                <b>Below</b>. A popup window is displayed below the corresponding HTML element so that the y-coordinate of the window's top border equals the y-coordinate of the element's bottom border.
                            </li>
                        </ul>
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupHorizontalOffsettopic.aspx">PopupHorizontalOffset</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupVerticalOffsettopic.aspx">PopupVerticalOffset</helplink>. Use these options to specify a popup window's horizontal and vertical offsets.
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_Opacitytopic.aspx">Opacity</helplink>. This option allows you to customize the level of transparency for a popup window and its controls. The option accepts values ranging from 0 (the window is transparent and so it's completely invisible) to 100 (the window is opaque).
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_EnableAnimationtopic.aspx">EnableAnimation</helplink>. Use this option to enable predefined popup animation effects.
                    </li>
                    <li>
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_PopupAnimationTypetopic.aspx">PopupAnimationType</helplink>. This property specifies the type of animation used to show a popup window.
                        <ul>
                        <li><b>Fade</b>. A popup window is displayed using a fade-in effect.</li>
                        <li><b>Slide</b>. A popup window is displayed using a slide effect.</li>
                        </ul>
                    </li>
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcPopupControlSettingsBase_CloseAnimationTypetopic">CloseAnimationType</helplink>. This property specifies the type of animation used to close a popup window. 
                        <ul>
                        <li><b>Fade</b>. A popup window is closed using a fade-in effect.</li>
                        <li><b>Slide</b>. A popup window is closed using a slide effect.</li>
                        </ul>
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_AllowDraggingtopic.aspx">AllowDragging</helplink>. Activate this option to allow a popup window to be dragged within the bounds of the client browser's window.
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_DragElementtopic.aspx">DragElement</helplink>. Choose which portion of the popup window starts the drag operation: header (a popup window can be dragged by its header) or window (dragging can be started by clicking anywhere within a popup window's client area).
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_AllowResizetopic.aspx">AllowResize</helplink>. Activate this option to allow a popup window sizing. Use the option in conjunction with the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ResizingModetopic.aspx">ResizingMode</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowSizeGriptopic.aspx">ShowSizeGrip</helplink> options. A popup window's size limits can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MinHeighttopic.aspx">MinHeight</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MinWidthtopic.aspx">MinWidth</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MaxHeighttopic.aspx">MaxHeight</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MaxWidthtopic.aspx">MaxWidth</helplink> properties.
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ResizingModetopic.aspx">ResizingMode</helplink>. This option controls whether a popup window is redrawn dynamically during resizing operations 
                        (the <b>Live</b> value), or the window is redrawn after the resizing operation is completed (the <b>Postponed</b> value).
                    </li>
                    <li>
                        <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowSizeGriptopic.aspx">ShowSizeGrip</helplink>. Use this option to toggle the visibility of a size grip element - that when dragged - allows end-users to size a popup window. The size grip can be displayed at all times (<b>True</b>), never (<b>False</b>) or dependent upon the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_AllowResizetopic.aspx">AllowResize</helplink> property setting (<b>Auto</b>).
                    </li>
                    <li>
                        <p>
                            <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_CloseActiontopic.aspx">CloseAction</helplink>. Use this option to specify the client action that closes a popup window. Option values include:
                        </p>
                        <ul>
                            <li>
                                <b>None</b>. A popup window can be closed only in code, via a specific client script method.
                            </li>
                            <li>
                                <b>CloseButton</b>. A popup window can only be closed by pressing the Close button displayed within the window's header.
                            </li>
                            <li>
                                <b>OuterMouseClick</b>. A popup window is closed by a click outside the window's region.
                            </li>
                            <li>
                                <b>MouseOut</b>. A popup window is closed if the mouse pointer moves out of the window's region. 
                                To specify the hide delay (in milliseconds), use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_DisappearAftertopic.aspx">DisappearAfter</helplink> option.
                            </li>
                        </ul>
                    </li>
                    <li>
                        <p>
                            <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupActiontopic.aspx">PopupAction</helplink>. Use this option to specify the client action that invokes a popup window. Choose one of the following option values:                        
                        </p>
                        <ul>
                            <li>
                                <b>None</b>. A popup window can be invoked only in code, via a specific client script method.
                            </li>
                            <li>
                                <b>LeftMouseClick</b>. A popup window can be invoked by left-clicking a corresponding web control or 
                                HTML element, specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupElementIDtopic.aspx">PopupElementID</helplink> property.
                            </li>
                            <li>
                                <b>RightMouseClick</b>. A popup window can be invoked by right-clicking a corresponding web control or 
                                HTML element, specified via the <b>PopupElementID</b> property.
                            </li>
                            <li>
                                <b>MouseOver</b>. A popup window is invoked when the mouse pointer enters the region occupied by a 
                                corresponding web control or HTML element, specified via the <b>PopupElementID</b> property. 
                                To specify the display delay (in milliseconds), use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_AppearAftertopic.aspx">AppearAfter</helplink> option.
                            </li>
                        </ul>
                    </li>
                </ul>

                ]]>
          </Description>
        </Demo>
        <Demo Key="DataBinding" Title="Data Binding" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/PopupControl.png" HighlightedTitle="Popup Window - Data Binding">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates the XML binding options available to you when using the DevExpress MVC Popup Extension. 
                    To invoke a popup window, move the mouse pointer over menu items displayed on the left.
                </p>
                <p>
                    The MVC Popup Extension provides a number of data binding methods, including <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlExtension_Bindtopic.aspx">Bind</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlExtension_BindToSiteMaptopic.aspx">BindToSiteMap</helplink>, and 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlExtension_BindToXMLtopic.aspx">BindToXML</helplink>. In this demo, the MVC Popup Extension uses the <b>BindToXML</b> method to bind to a Charts.xml 
                    file and obtain data from its &lt;Charts&gt; element.
                </p>
                <p>
                    Our ASP.NET MVC extensions allow you to bind their template extensions directly to the corresponding fields of a 
                    data source's data object (<b>DataItem</b>). To accomplish this, use the <b>DataBinder.Eval</b> method, 
                    and pass <b>Container.Window.DataItem</b> and a field name as method parameters. 
                    In the demo, the <b>DataBinder.Eval</b> method is used to bind template extensions of a popup window's 
                    content region and footer, via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_SetWindowContentTemplateContenttopic.aspx">SetWindowContentTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_SetWindowFooterTemplateContenttopic.aspx">SetWindowFooterTemplateContent</helplink>
                    methods. For the content region, the <b>BigImageUrl</b> field provides the <b>Image</b> control with <b>ImageUrl</b>
                    property values. For the footer, the View bound field provides a label's text.                
                </p>
                ]]>
          </Description>
          <HighlightedDescription>The Popup extension can retrieve window or content information from a data source.</HighlightedDescription>
          <SourceFile>~/Models/Categories.cs</SourceFile>
        </Demo>
        <Demo Key="ModalMode" Title="Modal Mode">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates how you can display a modal MVC Popup Extension - useful when you need display a 
                    dialog in a modal window. To enable modal mode for a popup or specific popup window, set its 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_Modaltopic.aspx">Modal</helplink> property to <b>true</b>. You can show any number of nested modal windows.
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ContentUrl" Title="Content URL">
          <Description>
            <![CDATA[
                 <p>The PopupControl extension allows display of the contents of other web pages specified by their URLs. In order to load a specific web page into the PopupControl, the <b>ContentUrl</b> property is used.</p>
                 <p>In this demo, the <b>ContentUrl</b> property is assigned with the navigation location of a specific web page that emulates a feedback form. The page's content is loaded into the popup window automatically. </p>
                 <p>This demo also illustrates the resizing feature of the PopupControl extension. This feature is enabled by setting the <b>AllowResize</b> property to true. The popup window can be resized by using the size grip or dragging the window's edges.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/Mail.cs</SourceFile>
          <SourceFile>~/Views/PopupControl/ContentUrlFeedForm.cshtml</SourceFile>
          <SourceFile>~/Views/PopupControl/ContentUrlFeedFormPartial.cshtml</SourceFile>
          <SourceFile>~/Views/PopupControl/ContentUrlFeedFormSuccessPartial.cshtml</SourceFile>
        <SourceFile>~/Content/PopupControl/ContentUrl/ContentUrlFeedForm.css</SourceFile>
        </Demo>
        <Demo Key="LoadOnDemand" Title="Load Content on Demand">
          <Description>
            <![CDATA[
        <p>
        The DevExpress MVC Popup Extension has a capability to load the content of popup windows on demand. Several content loading modes are available via the following settings of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_LoadContentViaCallbacktopic.aspx">LoadContentViaCallback</helplink> property.
        </p>
        <ul>
        <li>Default - The content is always (initially) rendered inside popup windows (the default behavior).</li>
        <li>OnPageLoad - Loading of popup window contents starts immediately after the entire page has been loaded.</li>
        <li>OnFirstShow - Loading of popup window contents starts when a popup window is invoked for the first time.</li>
        </ul>
        <p>
        Using the postponed load of popup window contents, you can enhance the response time of your web page on its initial load
            </p>

        <p>
        Note that in this example we purposely pause callback processing on the server side for a second in order to make the Loading Panel visible during this time.
            </p>
              ]]>
          </Description>
          <SourceFile>~/Views/PopupControl/LoadOnDemandPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates the use of templates within the DevExpress MVC Popup Extension.
                </p>
                <p>
                    Templates allow you to fully customize the appearance and layout of control elements. 
                    The MVC Popup Extension allows you to specify templates for its popup window headers and footers, via the 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_SetHeaderTemplateContenttopic.aspx">SetHeaderTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_SetFooterTemplateContenttopic.aspx">SetFooterTemplateContent</helplink> methods. 
                    In this demo, the Help and Close buttons are added to the window header. 
                    The window footer is extended with a label (which is displayed or hidden in response to Help button clicks) 
                    and a color palette (which allows users to change the background color of the window's content region).
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideEvents" Title="Client-Side Events">
          <Description>
            <![CDATA[
                <p>
                    This demo illustrates the capabilities of our client-side event technology. 
                    All available client-side events are traced in this demo. 
                    Click an icon next to a product name to invoke an associated popup window.
                </p>
                <p>
                    Client-side events are triggered in response to specific user actions executed on the client side 
                    (in particular, when invoking or hiding a popup window). 
                    Client-side event handlers represent code written in JavaScript. 
                    In order to handle a client-side event, the sender web control provides a property that accepts 
                    either code handling directly or the name of a handling function. 
                    This function should be defined either directly in the page's HTML code or in a separate js file. 
                    For each client-side event, there is a specific object, which has both server-side and client-side representations. 
                    This object will automatically render the necessary JavaScript code to the page, 
                    and assign it as the handler to the web control on the client side.                
                </p>
                ]]>
          </Description>
        </Demo>
        <Demo Key="ClientSideAPI" Title="Client-Side Functionality">
          <Description>
            <![CDATA[
                <p>
                    This sample demonstrates the capabilities of our client-side technology. 
                    Client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_EnableClientSideAPItopic.aspx">EnableClientSideAPI</helplink> property is set to <b>true</b>, 
                    or if there is a handler assigned to any client-side event. Once set, an individual client control 
                    object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
                </p>
                <p>                    
                    In this demo, each popup window is identified using its <b>Name</b> property. 
                    In order to obtain a specific popup window by its name on the client side, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_GetWindowByNametopic.aspx">GetWindowByName</helplink> method is used. 
                    A popup window can be invoked or hidden on the client side by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_ShowWindowtopic.aspx">ShowWindow</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_HideWindowtopic.aspx">HideWindow</helplink> method 
                    (see the <b>SetHintVisible</b> function).
                </p>
                <p>
                    In order to show or hide a default window, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_Showtopic.aspx">Show</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_Hidetopic.aspx">Hide</helplink> method can be used 
                    (see the <b>SetWindowErrorVisible</b> function).
                </p>
                <p>
                    The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_SetContentHtmltopic.aspx">SetContentHtml</helplink> method is used in this demo to display the HTML code representing the default 
                    popup window's content (see the <b>SetWindowErrorString</b> function). 
                    The content of a specific popup window can be obtained on the client side via the 
                    <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_GetWindowContentHtmltopic.aspx">GetWindowContentHtml</helplink> method and defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_SetWindowContentHtmltopic.aspx">SetWindowContentHtml</helplink> method.
                </p>
                ]]>
          </Description>
        </Demo>
      </DemoGroup>
    </DemoProduct>

      <DemoProduct Key="FileManagerAndUpload" Url="MVCxFileManagerAndUploadDemos" Title="ASP.NET MVC File Manager and File Upload" SeoTitle="ASP.NET MVC File Manager and File Upload" NavItemTitle="File Manager and File Upload" OrderIndex="10" IsMvc="true">
        <Keywords>files, download. filecontrol, uploading</Keywords>

        <DownloadUrl>
          http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
        </DownloadUrl>

        <BuyUrl>
          http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
        </BuyUrl>

        <DocUrl>
          http://documentation.devexpress.com/#AspNet/CustomDocument7896
        </DocUrl>

        <IntegrationImageUrl>~/Content/FileManager.png</IntegrationImageUrl>

        <Intro Title="Introduction" SeoTitle="ASP.NET MVC File Manager and File Upload">
        <BannerTitle>
          File Management Extensions for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          The FileManager extension with upload/download capabilities is inspired by the Windows File Explorer. It allows you to provide file management capabilities in your web applications with ease
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=TocYQl97c6U</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the FileManager
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>
                  This website demonstrates some of the many features and capabilities available to you when using our FileManager</helplink>. 
                  These features include: 
              </p>
              ]]>
        </Description>
        </Intro>
        <DemoGroup Key="FileManager" Title="File Manager" SeoTitle="ASP.NET MVC File Manager Extension">
          <Keywords>files, download, folder, filecontrol, uploading, explorer, filesystem</Keywords>
          <Overview Title="Overview">
            <Description>
              <![CDATA[
                <p>The DevExpress ASP.NET MVC File Manager extension provides advanced file management and Windows Explorer-like functionality for your web application. It allows end-users to browse, select and upload files, or change folder structure by renaming, moving and deleting files or folders. File and folder management capabilities are fully customizable and can be disabled when necessary.</p>
                <p>Follow the three simple steps below to add a DevExpress FileManager extension and bind it to your data. It's easy as “M”, “V”, and “C”.</p>
                <p>1. Model (the “M” in MVC). First, you will need a data Model object for the FileManager to bind to. The Model for FileManager is any custom file system provider or folder within your project (<helplink href="http://help.devexpress.com/#AspNet/CustomDocument15254">learn more in our online docs</helplink>).</p>
                <p>2. View (the “V” in MVC). Next, you will declare the FileManager extension inside of the View. Specifically, you will create a Partial View because the DevExpress FileManager extension provides AJAX callbacks by default, to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the FileManager extension inside of a Partial View and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property.</p>
                <code lang="html">
                @Html.DevExpress().FileManager(settings => {
                    settings.Name = "FileManager";
                    settings.CallbackRouteValues = new { Controller = "FileManager", Action = "OverviewPartial" };
                    settings.DownloadRouteValues = new { Controller = "FileManager", Action = "DownloadFiles" };
                    settings.Settings.ThumbnailFolder = Url.Content("~/FileManager/Thumbnails");
                    settings.Settings.InitialFolder = "Images\\Product icons";
                }).BindToFolder(Model).GetHtml()
              </code>
              <br />
              <p>In the controller code, add the action that will handle FileManager callbacks ("OverviewPartial" in the code sample below).</p>
              <p>Controller code:</p>             
              <code lang="CSharp">
                public class HomeController: Controller {
                  public object RootFolder = "~/FileManager/Files";
                  public ActionResult Overview() {
                    return View("Overview", RootFolder);
                  }
                  [ValidateInput(false)]
                  public ActionResult OverviewPartial() {
                    return PartialView("OverviewPartial", RootFolder);
                  }
                  public FileStreamResult DownloadFiles() {
                    return FileManagerExtension.DownloadFiles(
                      "FileManager", (string)RootFolder);
                  }
                }
              </code>
              <p><helplink href="http://www.youtube.com/watch?v=TocYQl97c6U&amp;list=PL8h4jt35t1wj2qt6K_HuEEStQeghfIBWJ&amp;index=2">Watch a short five-minute getting started video now</helplink> to learn about the DevExpress ASP.NET MVC FileManager extension.</p>
            ]]>
            </Description>
            <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
            <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
            <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument15236" Title="Documentation" />
            <KeyFeature Name="Binding to Data">
              <Description>
                <![CDATA[
             You can bind FileManager to a folder within your project or to your custom file system provider.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Access Control">
              <Description>
                <![CDATA[
             FileManager allows you to define access permissions for folders and files.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Multiple File Selection">
              <Description>
                <![CDATA[
             FileManager allows end-users to choose several files and perform actions on them simultaneously.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Detail View">
              <Description>
                <![CDATA[
             In the Detail View mode, a file list is represented by a grid containing information about files.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="File Uploading">
              <Description>
                <![CDATA[
             File Manager allows your end-users to upload files using a built-in upload panel.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="File Downloading">
              <Description>
                <![CDATA[
             You can provide your end-users with the ability to download files selected within FileManager.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="AJAX Support">
              <Description>
                <![CDATA[
             FileManager supports AJAX technology by implementing the ability to load the file list from the server via callbacks.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Rich Client-Side Functionality">
              <Description>
                <![CDATA[
             A comprehensive client-side API is available for FileManager. This functionality, coupled with the ability to handle events on the client side, gives you full control over the file manager behavior on the client side.
            ]]>
              </Description>
            </KeyFeature>
          </Overview>
          <Demo Key="Features" Title="Features" SeoTitle="Features">
            <Description>
              <![CDATA[
                    <p>
                    FileManager represents an Explorer-like extension providing your end-users with the capability to manage files and folders. This extension allows end-users to easily upload and select files and even change the folder structure (by renaming, copying, moving and deleting files or folders). File and folder management capabilities are fully customizable and can be switched off, if necessary.
                    </p>
                    
                    <p>
                    The FileManager extension consists of the following main elements: a toolbar, a folder container, a file container, and an upload panel. Settings of these elements and common extension settings can be customized via the corresponding properties such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_Settingstopic">Settings</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsEditingtopic">SettingsEditing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsToolbartopic">SettingsToolbar</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsFolderstopic">SettingsFolders</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsUploadtopic">SettingsUpload</helplink>.
                    </p>
                    
                    <p>
                    The main features of the FileManager extension are listed below (together with the corresponding extension settings):
                    </p>
                    
                    <ul>
                    <li>
                    Showing folder and file structure (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerExtension_BindToFoldertopic">BindToFolder</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_InitialFoldertopic">Settings.InitialFolder</helplink>);
                    </li>
                    <li>
                    Auto-sorting folders and files based on their names;
                    </li>
                    <li>
                    Automatically generating and displaying thumbnails for image files (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_ThumbnailFoldertopic">Settings.ThumbnailFolder</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListThumbnailsViewSettings_ThumbnailSizetopic">SettingsFileList.ThumbnailsViewSettings.ThumbnailSize</helplink>);
                    </li>
                    <li>
                    Capability to rename, copy, move, and delete files and folders (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowRenameButtontopic">SettingsToolbar.ShowRenameButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowCopyButtontopic">SettingsToolbar.ShowCopyButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowMoveButtontopic">SettingsToolbar.ShowMoveButton</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowDeleteButtontopic">SettingsToolbar.ShowDeleteButton</helplink>);
                    </li>
                    <li>
                    Capability to create new folders (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowCreateButtontopic">SettingsToolbar.ShowCreateButton</helplink>);
                    </li>
                    <li>
                    Capability to download a selected file (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowDownloadButtontopic">SettingsToolbar.ShowDownloadButton</helplink>);
                    </li>
                    <li>
                    Uploading files using a built-in upload panel (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsUploadtopic">SettingsUpload</helplink>);
                    </li>
                    <li>
                    Capability to select multiple files for upload (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsUpload_UseAdvancedUploadModetopic">SettingsUpload.UseAdvancedUploadMode</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerUploadAdvancedModeSettings_EnableMultiSelecttopic">SettingsUpload.AdvancedModeSettings.EnableMultiSelect</helplink>);
                    </li>
                    <li>
                    Updating the file list dynamically via callbacks;
                    </li>
                    <li>
                    Response to file selection and submission (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileChangedtopic">SelectedFileChanged</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileOpenedtopic">SelectedFileOpened</helplink> client events);
                    </li>
                    <li>
                    Quick search for a file within a list, using a built-in filter box (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowFilterBoxtopic">SettingsToolbar.ShowFilterBox</helplink>);
                    </li>
                    <li>
                    Customizable layout (based on a built-in splitter);
                    </li>
                    <li>
                    Keyboard support for main file operations.
                    </li>
                    </ul>
                    
                    <p>
                    This demo illustrates FileManager primary features. Use the options in the top panel to change the values of corresponding FileManager properties, and see the result within the extension.
                    </p>
                ]]>
            </Description>
            <SourceFile>~/Views/FileManager/FeaturesPartial.cshtml</SourceFile>
          </Demo>
          <Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
            <Keywords>filebinding, filesystembinding, database, db, datasource</Keywords>
            <Description>
              <![CDATA[
                    <p>This demo illustrates how you can enable the <b>FileManager</b> to retrieve its content from a database.</p>
                    <p>With the <b>FileManager</b> you can visualize file system data that is available in a database. All you have to do is to bind the file manager to a model via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerExtension_BindToFileSystemProvidertopic">BindToFileSystemProvider</helplink> method. This method parameter is a data model object.</p>
                    <p>In this demo, the <b>FileManager</b> is bound to an object of the <b>ArtsFileSystemProvider</b> class, which is derived from the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFileManagerFileSystemProviderBasetopic">FileSystemProviderBase</helplink> class and overrides its methods that implement file management operations, e.g. GetFiles, GetFolders, CreateFolder, etc. (See the Model code)</p>
                ]]>
            </Description>
            <SourceFile>~/Models/Arts.cs</SourceFile>
            <SourceFile>~/Views/FileManager/DataBindingPartial.cshtml</SourceFile>
          </Demo>
          <Demo Key="AccessControl" Title ="Access Control" SeoTitle="Access Control">
            <Keywords>restrictions, fileaccess, accesscontrol, rights</Keywords>
            <Description>
              <![CDATA[
                    <p>This demo shows how to set up folder and file access permissions, grant them to security roles and enforce specific roles on <b>FileManager</b>.</p>
                    
                    <p><b>FileManager</b> allows you to define access permissions for folders and files using a set of folder/file access rules (see the file manager's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsPermissions_AccessRulestopic">SettingsPermissions.AccessRules</helplink> collection). An access rule specifies a path to which it is applied and lists permissions (allowed or denied actions) associated with this rule. You can easily set up access rules for folders (including their files and child folders) and individual files using <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFileManagerFileManagerFolderAccessRuletopic">FileManagerFolderAccessRule</helplink> and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFileManagerFileManagerFileAccessRuletopic">FileManagerFileAccessRule</helplink> elements.</p>
                    
                    <p>In addition, you can associate any number of access rules with specific security roles to group related permissions together. To associate an access rule with a security role, assign the role's name to the rule's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerAccessRuleBase_Roletopic">Role</helplink> property. Related access rules should be assigned matching role names.</p>
                    
                    <p>Any created role can be enforced on the <b>FileManager</b> via its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsPermissions_Roletopic">SettingsPermissions.Role</helplink> property. After that, the file manager will display folder and files and provide access permissions to them based on the assigned role.</p>
                    
                    <p>In the demo, you can select one of the security roles listed above to enforce it on <b>FileManager</b>. File and folder permissions granted to each role are listed below.</p>
                    
                    <ul>
                    
                        <li><b>Default User</b>. This role allows users only to browse folder contents. Any file/folder modifications and file upload are prohibited. The System folder is hidden in a folder tree.</li>
                        
                        <li><b>Document Manager</b>. This role allows users to browse folder contents and perform any folder/file operations (including file upload) within the Documents folder only. Any file/folder modifications and file upload within other folders are prohibited. The System folder is hidden in a folder tree.</li>
                        
                        <li><b>Media Moderator</b>. This role allows users to browse folder contents and perform any folder/file operations (except for file upload) within the Music and Video folders only. Any file/folder modifications and file upload within other folders are prohibited. The System folder is hidden in a folder tree.</li>
                        
                        <li><b>Administrator</b>. This role allows users to browse folder contents and perform any folder/file operations (including file upload). The System folder is shown in a folder tree. This folder is also fully accessible for any file/folder modifications and file upload.</li>
                    
                    </ul>
              ]]>
            </Description>
            <SourceFile>~/Views/FileManager/AccessControlPartial.cshtml</SourceFile>
          </Demo>
          <Demo Key="ClientSideEvents" Title="Client-Side Events" SeoTitle="Client-Side Events">
            <Description>
              <![CDATA[
                    <p>
                    This sample demonstrates the capabilities of our client-side event management technology. All available extension-specific client-side events are traced in this demo. Play with the FileManager's interface elements to initiate client-side events.
                    </p>
                    
                    <p>
                    The FileManager extension provides advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client, and cover all the key elements of the FileManager extension's functionality. So, they give you the ability to completely control the client-side behavior of the extension.
                    </p>
                    
                    <p>
                    The following client events are available for the FileManager:
                    </p>
                    
                    <ul>
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> - Occurs on the client side after the extension has been initialized, but prior to its display on the browser.
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemMovingtopic">ItemMoving</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemMovedtopic">ItemMoved</helplink>; <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemRenamingtopic">ItemRenaming</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemRenamedtopic">ItemRenamed</helplink>; <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemDeletingtopic">ItemDeleting</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemDeletedtopic">ItemDeleted</helplink> - Allow you to respond to the corresponding actions performed on a file or folder.
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FileUploadingtopic">FileUploading</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FileUploadedtopic">FileUploaded</helplink> - Fire before and after a new file has been uploaded to the server.
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FolderCreatingtopic">FolderCreating</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FolderCreatedtopic">FolderCreated</helplink> - Fire before and after a new folder has been created.
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ErrorOccurredtopic">ErrorOccurred</helplink> - Enables you to properly respond to an error occurring as a result of end-user manipulations. 
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileChangedtopic">SelectedFileChanged</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileOpenedtopic">SelectedFileOpened</helplink> - Allow you to respond to file selections and openings.
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_CurrentFolderChangedtopic">CurrentFolderChanged</helplink> – Fires after the current folder has been changed.
                    </li>
                    
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FileDownloadingtopic">FileDownloading</helplink> – Fires on the client side before a file download starts and allows you to cancel the action.
                    </li>
                    
                    </ul>
                    
                    <p>
                    To learn more on client-side events, refer to the <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument9150">Client-Side API</helplink> help topic.
                    </p>
              ]]>
            </Description>
            <SourceFile>~/Views/FileManager/ClientSideEventsPartial.cshtml</SourceFile>
          </Demo>
          <Demo Key="DetailsViewMode" Title="Details View" SeoTitle="Details View" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/FileManager.png" HighlightedTitle="File Manager - Details View">
            <Description>
              <![CDATA[
                    <p>
                    This demo demonstrates the FileManager's <b>Details</b> view mode.
                    </p>
                    <p>
                    The FileManager supports two file list view modes: Thumbnails and Details. The thumbnails view is displayed by default. Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsFileList_Viewtopic">SettingsFileList.View</helplink> property to enable the Details mode.
                    </p>
                    <p>
                    In the Details view mode, a file list is represented by a grid containing information about files. You can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsFileList_DetailsViewSettingstopic">SettingsFileList.DetailsViewSettings</helplink> property settings to customize the mode functionality.
                    </p>
                    <ul>
                    <li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_AllowColumnResizetopic">AllowColumnResize</helplink> property specifies whether the columns can be resized by end-users.
                    </li><li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_AllowColumnDragDroptopic">AllowColumnDragDrop</helplink> property specifies whether end-users can reorder columns by dragging their headers.
                    </li><li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_AllowColumnSorttopic">AllowColumnSort</helplink> property specifies whether end-users can sort data by clicking column headers.
                    </li><li>
                    <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_ShowHeaderFilterButtontopic">ShowHeaderFilterButton</helplink> property specifies whether column headers display filter buttons allowing end-users to filter files.
                    </li>
                    </ul>
              ]]>
            </Description>
            <HighlightedDescription>The FileManager extension allows you to easily add file management functionality to your web application. This demo shows the Details view mode of the FileManager, in which detailed file information is displayed in a grid-style file container and navigation is provided by a tree-style folder.</HighlightedDescription>
            <SourceFile>~/Models/Arts.cs</SourceFile>
            <SourceFile>~/Views/FileManager/DetailsViewModePartial.cshtml</SourceFile>
          </Demo>
          <Demo Key="MultipleFilesSelection" Title="Multiple Files Selection" SeoTitle="Multiple Files Selection">
            <Description>
              <![CDATA[
                    <p>
                    This demo illustrates the FileManager's multiple file selection capability. It allows end-users to choose several files and to perform actions on them simultaneously.
                    </p> 
                    <p>
                    Multi-file selection is disabled by default. To enable it, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_EnableMultiSelecttopic">Settings.EnableMultiselect</helplink> property to true.
                    </p> 
                    <p>
                    The multi-file selection is available in the both – detail and thumbnail file list modes. You can switch them using the 'View Mode' combo box.
                    </p>
                    <p>
                    In this demo, the FileManager's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectionChangedtopic">SelectionChanged</helplink> client event is handled to demonstrate how you can obtain information about selected files using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_GetSelectedItemstopic">GetSelectedItems</helplink> client method.
                    </p>
              ]]>
            </Description>
            <SourceFile>~/Views/FileManager/MultipleFilesSelectionPartial.cshtml</SourceFile>
          </Demo>
        </DemoGroup>
        <DemoGroup Key="UploadControl" Title="File Upload" SeoTitle="ASP.NET MVC File Uploader">
          <Overview Title="Overview">
            <Description>
              <![CDATA[
              <p>The DevExpress ASP.NET MVC UploadControl extension allows you to add file upload capability to your web application.</p>
              <p>To add an UploadControl to a your web application, define the UploadControl extension within the View wrapped with the HTML form.</p>
              <p>View code:</p>
              <code lang="html">
                @using(Html.BeginForm()) {
                    @Html.DevExpress().UploadControl(settings => {
                        settings.Name = "UploadControl";
                        settings.ShowAddRemoveButtons = true;
                        settings.ShowProgressPanel = true;
                        settings.ShowClearFileSelectionButton = true;
                        settings.ShowUploadButton = true;
                        settings.Size = 30;
                    }).GetHtml()
                }
              </code>
            ]]>
            </Description>
            <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
            <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
            <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8977" Title="Documentation" />
            <KeyFeature Name="Support for File Validation">
              <Description>
                <![CDATA[
             The uploaded file can automatically be validated on the server, based on a number of validation settings.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Multi-File Upload">
              <Description>
                <![CDATA[
             UploadControl allows any number of file input elements to be added or removed dynamically via the extension’s UI.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Multi-File Selection">
              <Description>
                <![CDATA[
             UploadControl allows end-users to choose several files to upload within a single file open dialog.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="AJAX Uploading">
              <Description>
                <![CDATA[
             UploadControl supports file upload via callbacks.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Visual Upload Progress">
              <Description>
                <![CDATA[
             The progress panel displays upload progress in real-time.
            ]]>
              </Description>
            </KeyFeature>
            <KeyFeature Name="Rich Client-Side Functionality">
              <Description>
                <![CDATA[
             A comprehensive client-side API is available for UploadControl. This functionality, coupled with the ability to handle events on the client side, gives you full control over the extension's behavior on the client side.
            ]]>
              </Description>
            </KeyFeature>
          </Overview>
          <Keywords>uploading, fileapi, progressing</Keywords>
          <Demo Key="MultiFileSelection" Title="Multi-File Selection" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Upload.png" HighlightedTitle="Upload Control - Multi-File Selection">
            <Description>
              <![CDATA[
                <p>
                    This demo illustrates UploadControl's multi-file selection capability. It allows end-users to choose several files to upload within a single file open dialog. This demo also shows how a custom popup progress panel can be implemented to display upload progress information for both the currently processed file and the entire uploaded data.
                </p><p>
                    By default, the multi-file selection mode is disabled. To enable it, switch the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadAdvancedModeSettings_EnableMultiSelecttopic.aspx">AdvancedModeSettings.EnableMultiSelect</helplink> property to true.
                </p><p>
                When multi-file selection is on, the UploadControl text box is used to display information about the current file selection. When selecting a single file, the text box contains the selected file name. When multiple files are selected, the text box displays the total number of selected files. In this case, the text box' tooltip will contain a list of the selected files.
                </p><p>
                    A list of files selected for upload can be easily cleared by using the "Clear file selection" button. By default, this button automatically appears within the text box when any file is selected. To disable the button functionality, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_ShowClearFileSelectionButtontopic.aspx">ShowClearFileSelectionButton</helplink> property to false.
                </p><p>
                    In this demo, you will learn how to handle the UploadControl's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_UploadingProgressChangedtopic.aspx">UploadingProgressChanged</helplink> client event to obtain information about file upload progress, and to use this information to calculate the speed of an upload and forecast the estimated upload time.
                </p>]]>
            </Description>
            <HighlightedDescription>The UploadControl enables you to easily introduce file upload capability into your web application. This demo illustrates the UploadControl's multi-file selection feature, in which end-users can select multiple files to upload using a single dialog.</HighlightedDescription>
            <SourceFile>~/Views/UploadControl/MultiFileSelectionPartial.cshtml</SourceFile>
          </Demo>
          <Demo Key="MultiFileUpload" Title="Multi-File Upload">
            <Description>
              <![CDATA[
            <p>
                This demo illustrates the DevExpress MVC Upload Extension’s ability to upload more than one file at a time. The Upload Extension allows end-users to upload files to the web application's server.
            </p><p>
                The Upload Extension allows any number of file input elements to be added or removed dynamically via the extension’s user interface. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_ShowAddRemoveButtonstopic.aspx">ShowAddRemoveButtons</helplink> property controls the availability of corresponding user interface elements. The initial number of file input elements can be defined using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_FileInputCounttopic.aspx">FileInputCount</helplink> property.
            </p><p>
                All file input element manipulations are executed on the client side. Corresponding server-side synchronization is executed on the first round-trip to the server.
            </p><p>
                On the server, uploaded files can be accessed using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlExtension_GetUploadedFilestopic.aspx">UploadControlExtension.GetUploadedFiles</helplink> static method. Each uploaded file can be validated using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadedFile_IsValidtopic.aspx">UploadedFile.IsValid</helplink> property and can be saved via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadedFile_SaveAstopic.aspx">UploadedFile.SaveAs</helplink> method.
            </p><p>
                In this demo, clicking the 'Add images to collection' button initiates a round-trip for multi-file upload. All valid uploaded images are displayed within the bottom panel.
            </p>]]>
            </Description>
          </Demo>
          <Demo Key="Callbacks" Title="AJAX Uploading">
            <Description>
              <![CDATA[
            <p>
                The DevExpress MVC File Upload Extension allows end-users to upload files to an application server. In this demo, both client and server capabilities are used to upload an image file to the server via a callback, create the image's thumbnail, and display the thumbnail within a specific placeholder on the web page.
            </p><p>
                A callback for file upload is initiated by using the Upload Extension’s <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_Uploadtopic.aspx">Upload</helplink> client method - called in response to a button click. In order to process callbacks properly, the Upload Extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property is used to specify the path to a controller action used to handle a callback request. In the action's implementation, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlExtension_GetUploadedFilestopic.aspx">UploadControlExtension.GetUploadedFiles</helplink> static method with specific parameters is used to process the uploaded file. One of the parameters identifies a delegate method that receives the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxUploadControlFileUploadCompleteEventArgstopic.aspx">FileUploadCompleteEventArgs</helplink> argument. Using this argument, the delegate method implements all the logic to save the uploaded file (using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadedFile_SaveAstopic.aspx">e.UploadedFile.SaveAs</helplink> method) and display its thumbnail in a placeholder.
            </p>]]>
            </Description>
          </Demo>
        </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="ImageAndDataNavigation" Url="MVCxImageAndDataNavigationDemos" Title="ASP.NET MVC Image and Data Navigation" SeoTitle="ASP.NET MVC Image and Data Navigation" NavItemTitle="Image and Data Navigation" OrderIndex="11" IsMvc="true">
      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument7896
      </DocUrl>

      <IntegrationImageUrl>~/Content/Image_and_Data_Navigation.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Image and Data Navigation Extensions">
        <BannerTitle>
          Image and Data Browsing Controls for ASP.NET
        </BannerTitle>
        <BannerText>
          A rich collection of multi-purpose image and data browsing tools designed to address a wide-range of business use scenarios
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/watch?v=9NaTFG9DTmg</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the ASPxperience Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>
                  This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>. 
                  These features include: 
              </p>
              ]]>
        </Description>
      </Intro>
      <DemoGroup Key="DataView" Title="Data View" SeoTitle="ASP.NET MVC Data View Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
            <p>The DevExpress ASP.NET MVC DataView extension displays data using a highly customizable card or list-based UI metaphor.</p>
            <p>Follow the three simple steps below to add a DevExpress DataView extension and bind it to your data. It's easy as “M”, “V”, and “C”.</p>
            <p>1. Model (the "M" in MVC). First, you will need a Model object for the DevExpress DataView to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. You can also use any model that supports the IEnumerable interface.</p>
            <p>2. View (the "V" in MVC). Next, you will declare the DataView extension inside of the View. Specifically, you will create a Partial View because the DevExpress DataView extension provides AJAX callbacks by default to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the DataView extension inside of a Partial View and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property:</p>
            <p>Partial View code:</p>
            <code lang="html">
              @Html.DevExpress().DataView(settings => {
                  settings.Name = "dataView";
                  settings.CallbackRouteValues = new { 
                    Controller = "DataView", Action = "OverviewPartial" };
                  settings.SettingsTableLayout.RowsPerPage = 1;
                  settings.SetItemTemplateContent(c => {
                      ViewContext.Writer.Write(
                          "<img src=\"" + Url.Content(DataBinder.Eval(c.DataItem, "PhotoUrl").ToString()) + "\" alt=\"\" />"
                      );
                  });
              }).BindToXML(HttpContext.Current.Server.MapPath("~/App_Data/Contacts.xml"), "//Contact").GetHtml()
            </code>
            <br />
            <p>3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that will handle the DataView callbacks. The "OverviewPartial" action method below handles the callbacks. As you can see, the native DevExpress DataView extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.</p>
            <p>Controller code:</p>
            <code lang="CSharp">
              public class HomeController: Controller {
                public ActionResult Overview() {
                  return View("Overview");
                }
                public ActionResult OverviewPartial() {
                  return PartialView("OverviewPartial");
                }
              }
            </code>
        ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument13755" Title="Documentation" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             You can bind a DataView to a data source so that your data items are retrieved from an XML file, a SiteMap or an IEnumerable object.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Endless Paging">
            <Description>
              <![CDATA[
             The DataView extension supports an endless paging mode that allows the loading of items on demand.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="SEO Friendly Paging">
            <Description>
              <![CDATA[
             DataView's pager can represent links to other pages as hyperlinks, thus enabling a web-crawler to index the entire DataView content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Custom Callbacks">
            <Description>
              <![CDATA[
             DataView provides the ability to initiate a custom callback on demand, and then performs the required server-side processing, thus allowing you to implement sorting or filtering operations.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Built-in Pager">
            <Description>
              <![CDATA[
             DataView automatically splits content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Template Technology">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within DataView, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for DataView. This functionality, coupled with the ability to handle events on the client side, gives you full control over the extension's behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
          <Description>
            <![CDATA[
<p>
This demo illustrates the ability of the DevExpress DataView extension to bind to a data source. In this sample, the extension is bound to the XmlDataSource component, which obtains data from an xml file with the following structure.
</p>

<p>
<code lang="xml">
<Contacts>
 <Contact Name="..." Address="..." Phone ="..." PhotoUrl ="..." />
 ...
</Contacts>
</code>
</p>

<p>
The appearance of DataView data items is templated utilizing the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDataViewSettings_SetItemTemplateContenttopic.aspx">SetItemTemplateContent</helplink> method.
</p>
                      ]]>
          </Description>
          <SourceFile>~/Views/DataView/DataBindingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="EndlessPaging" Title="Endless Paging" SeoTitle="Endless Paging" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/DataView.png" HighlightedTitle="Data View - Endless Paging">
          <Description>
            <![CDATA[
                  <p>The DataView extension supports an endless paging mode that allows loading items on demand. To enable this functionality, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewDataViewPagerSettings_EndlessPagingModetopic">EndlessPagingMode</helplink> property should be set to <b>OnClick</b>. In this mode, the DataView extension loads more items dynamically when the 'Show more items...' button is clicked.</p>

                  <p>Switch the <b>Endless Paging mode</b> option to "OnScroll" to see how the DataView automatically loads items on page scrolling.</p>

                   <p>Note that in this example, we purposely pause callback processing on the server side for half a second in order to make the loading panel visible during this time.</p>
               ]]>
          </Description>
          <HighlightedDescription>The Endless Paging mode in the DataView allows rows to load on demand based on user actions. In this demo, more items are loaded on demand when the end-user clicks the “Show more items…” link.</HighlightedDescription>
          <SourceFile>~/Views/DataView/EndlessPagingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="SEOFriendlyPaging" Title="SEO Friendly Paging" SeoTitle="SEO Friendly Paging">
          <Description>
            <![CDATA[
                 <p>
                 A known problem is that of search engines simply ignore pagers. When indexing a site, they only use the information contained within the first page. The reason for this is that pager links are usually not represented as hyperlinks to other pages. Instead, they simply respond to click events to raise data update callbacks.
                 </p>
                 <p>
                 The DataView allows you to make it SEO-friendly. Use the <b>PagerSettings.SEOFriendly</b> property to accomplish this.
                 </p> 
                 <p>
                 If this property is set to <b>CrawlerOnly</b>, hyperlinks are rendered in the pager when a web-crawler is detected. For other visitors, standard pager links are generated. So, search engines can index the entire content, while site visitors experience the same callback functionality.
                 </p> 
                 <p>
                 If the property is set to <b>Enabled</b> or <b>Disabled</b>, automatic web crawler detection is disabled. The pager renders either SEO-friendly or standard links respectively.
                 </p> 
              ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/DataView/SEOFriendlyPagingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="CustomCallback" Title="Custom Callback" SeoTitle="Custom Callback">
          <Description>
            <![CDATA[
                  <p>
                  The DataView provides the ability to initiate a custom callback on demand by using the client <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMVCScriptsMVCxClientDataView_PerformCallbacktopic.aspx">PerformCallback</helplink> method and then performs required server-side processing. Typically, calling custom callbacks may be useful to solve a sorting or filtering data task displayed by the DataView extension. 
                  </p>
                  <p>
                  This demo shows how DataView data can be sorted using custom callbacks. The data field used for sorting and the sort order can be selected using two combo boxes on the top right. The <b>PerformCallback</b> method of the DataView is called when there is a change to the combo box's selected value. Then, a specific SQL query is formed on the server side depending on current combo box values. 
                  </p>
              ]]>
          </Description>
          <SourceFile>~/Models/Cameras.cs</SourceFile>
          <SourceFile>~/Views/DataView/CustomCallbackPartial.cshtml</SourceFile>
        <SourceFile>~/Content/DataView/CSS/CustomCallback.css</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="ImageGallery" Title="Image Gallery" SeoTitle="ASP.NET MVC Image Gallery Control">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
            <p>The DevExpress ASP.NET MVC ImageGallery extension displays image collections using a tabular layout with dynamic layout adaptation, an integrated pager and a built-in image slider.</p>
            <p>Follow the three simple steps below to add a DevExpress ImageGallery extension and bind it to your data. It's easy as “M”, “V”, and “C”:</p>
            <p>1. Model (the "M" in MVC). First, you will need a Model object for the DevExpress ImageGallery to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. However, you can use any model that supports the IEnumerable interface. You can also bind the ImageGallery to a folder within your project.</p>
            <p>2. View (the "V" in MVC). Now, you will declare the ImageGallery extension inside of the View. Specifically, you will create a Partial View because the DevExpress ImageGallery extension provides AJAX callbacks by default, to give your end-users a better experience without updating the  entire page. However, because ASP.NET MVC does not support callbacks, declare the ImageGallery extension inside of a Partial View and define how the callbacks will be routed back to your controller using the <b>CallbackRouteValues</b> property:</p>
            <p>Partial View code:</p>
            <code lang="html">
              @Html.DevExpress().ImageGallery(settings => {
                  settings.Name = "imageGallery";
                  settings.CallbackRouteValues = new {
                    Controller = "ImageGallery", Action = "OverviewPartial" };
                  settings.ImageCacheFolder = "~/ImageGallery/Thumb/";
                  settings.SettingsTableLayout.RowsPerPage = 1;
                  settings.SettingsTableLayout.ColumnCount = 3;
              }).BindToFolder(Model).GetHtml()
            </code>
            <br />
            <p>3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that will handle the ImageGallery callbacks. The "OverviewPartial" action method below handles the callbacks. As you can see, the native DevExpress ImageGallery extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.</p>
            <p>Controller code:</p>
            <code lang="CSharp">
              public class HomeController: Controller {
                public string ImageSourceFolder = "~/Images/photo_gallery";
                public ActionResult Overview() {
                  return View("Overview", ImageSourceFolder);
                }
                public ActionResult OverviewPartial() {
                  return PartialView("OverviewPartial", ImageSourceFolder);
                }
              }
            </code>
        ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/watch?v=waDsJiM5udU" Title="Training Videos" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             You can bind an ImageGallery to a data source so that your data items are retrieved from a folder, an XML file or an IEnumerable object.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Endless Paging">
            <Description>
              <![CDATA[
             The ImageGallery extension supports an endless paging mode that allows the loading of items on demand.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Built-in Pager">
            <Description>
              <![CDATA[
             ImageGallery automatically splits content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Template Technology">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within ImageGallery, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for ImageGallery. This functionality, coupled with the ability to handle events on the client side, gives you full control over the extension's behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="DataBinding" Title="Data Binding">
          <Description>
            <![CDATA[
                <p>This demo illustrates how the <b>ImageGallery</b> extension can be populated with image information from a data source. The ImageGallery extension can be bound to a data source using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDataViewExtensionBase_BindToXMLtopic1857.aspx">BindToXML</helplink> method. While binding, the extension automatically creates image items and retrieves their property values from the corresponding data items. The extension implements specific properties that point to the data fields containing the required data:</p>
                <ul>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_FullscreenViewerTextFieldtopic">FullscreenViewerTextField</helplink></li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_FullscreenViewerThumbnailUrlFieldtopic">FullscreenViewerThumbnailUrlField</helplink></li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_ImageUrlFieldtopic">ImageUrlField</helplink></li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_NavigateUrlFieldtopic">NavigateUrlField</helplink></li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_TextFieldtopic">TextField</helplink></li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_ThumbnailUrlFieldtopic">ThumbnailUrlField</helplink></li>
        </ul>
                <p>In this demo, ImageGallery is bound to an XML file by passing the file name and the required XPath to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDataViewExtensionBase_BindToXMLtopic1858.aspx">BindToXML</helplink> method as a parameter. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_FullscreenViewerThumbnailUrlFieldtopic">FullscreenViewerThumbnailUrlField</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_ThumbnailUrlFieldtopic">ThumbnailUrlField</helplink> properties are used to obtain the corresponding property values from the specified fields.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/ImageGallery/DataBindingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="FolderBinding" Title="Folder Binding" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/ImageGallery.png" HighlightedTitle="Image Gallery - Folder Binding">
          <Description>
              <![CDATA[
                <p>This demo illustrates how to use the ImageGallery extension by specifying a single property. All you need to do to start working with the DevExpress image gallery is to pass the required folder path as a parameter to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGalleryExtension_BindToFoldertopic">BindToFolder</helplink> method – and the extension is ready to use. Images are scaled and thumbnails are created automatically.</p>
                <p>In this demo, the <b>Apply watermark</b> check box allows you to apply a watermark to images by handling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_CustomImageProcessingtopic">CustomImageProcessing</helplink> event.</p>
            ]]>
          </Description>
          <HighlightedDescription>The Image Gallery extension allows you to display images from a source folder. In this demo, end-users can switch between different source folders at runtime using a combo box.</HighlightedDescription>
          <SourceFile>~/Views/ImageGallery/FolderBindingPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="CustomImageViewer" Title="Custom Image Viewer" SeoTitle="Custom Image Viewer">
          <Keywords>Image Viewer</Keywords>
          <Description>
            <![CDATA[
                <p>This demo illustrates how to implement a custom image viewer. For this purpose, the built-in image viewer is disabled by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryImageGalleryFullscreenViewerSettings_Visibletopic">SettingsFullscreenViewer.Visible</helplink> property to false. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryScriptsASPxClientImageGallery_FullscreenViewerShowingtopic">FullscreenViewerShowing</helplink> event is handled to display a modal popup window, which implements the functionality of image viewer when a gallery image is clicked.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/ImageGallery/CustomImageViewerPartial.cshtml</SourceFile>
        <SourceFile>~/Content/ImageGallery/CustomImageViewer.css</SourceFile>
        </Demo>
        <Demo Key="BindingToBinaryData" Title="Binding To Binary Data">
          <Description>
            <![CDATA[
                <p>The <b>ImageGallery</b> extension can display binary images.</p>
                <p>In this demo, the image gallery is bound to an <b>IEnumerable</b> object via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcDataViewExtensionBase_Bindtopic">Bind</helplink> method. This object contains binary images retrieved from the <b>AccessDataSource</b> control. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_ImageContentBytesFieldtopic">ImageContentBytesField</helplink> property specifies the data source field from which binary images should be retrieved. The ImageGallery extension caches the images to the folder specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_ImageCacheFoldertopic">ImageCacheFolder</helplink> property.</p>
            ]]>
          </Description>
          <SourceFile>~/Models/BinaryImages.cs</SourceFile>
        </Demo>
        <Demo Key="Templates" Title="Templates" SeoTitle="Item Customization Using Templates">
          <Keywords>template, customization</Keywords>
          <Description>
            <![CDATA[
                <p>The <b>ImageGallery</b> extension supports the template technology, allowing you to completely customize an extension's appearance and layout.</p>
                <p>The look of the ImageGallery extension's default elements can be modified by creating a specific template, which defines how an element will be rendered by a client browser. The ImageGallery extension allows you to create templates for the following elements: fullscreen viewer item text, fullscreen viewer text, and item text. You can apply templates for all identical elements within the extension (using extension level templates) or for a particular element (using item level templates).</p>
                <p>In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_SetItemTextTemplateContenttopic">SetItemTextTemplateContent</helplink> property is used to display information (name and email address) about items. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_SetFullscreenViewerItemTextTemplateContenttopic">SetFullscreenViewerItemTextTemplateContent</helplink> property is used to display information about items (name, email address and phone number) in the full screen viewer.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/ImageGallery/TemplatesPartial.cshtml</SourceFile>
        <SourceFile>~/Content/ImageGallery/Templates.css</SourceFile>
        </Demo>
        <Demo Key="ResponsiveLayout" Title="Responsive Layout">
          <Description>
            <![CDATA[
                <p>The ImageGallery extension can be used to create a responsive page layout. For this purpose, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageGallerySettings_Layouttopic">Layout</helplink> property should be set to <b>Flow</b> to allow the items to flow one after another to fill the available page area. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewDataViewFlowLayoutSettings_ItemsPerPagetopic">SettingsFlowLayout.ItemsPerPage</helplink> property allows you to specify the number of items that a page displays. Note that the fullscreen viewer always has a responsive layout.</p>
            ]]>
          </Description>
          <SourceFile>~/Views/ImageGallery/ResponsiveLayoutPage.cshtml</SourceFile>
          <SourceFile>~/Views/ImageGallery/ResponsiveLayoutPagePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="ImageZoom" Title="Image Zoom" SeoTitle="ASP.NET MVC Image Zoom" IsNew="true">
        <Overview Title="Overview">
          <Description>
           <![CDATA[
            <p>The DevExpress ASP.NET MVC ImageZoom extension provides you with the ability to display images in high-res detail. ImageZoom combines two image zoom effects. Hovering over the image displays a zoomed area, a click on the image enlarges it in a full-screen popup.</p>
            <p>The code sample below demonstrates how to add the ImageZoom extension to your project and specify small and large images to be displayed in the extension.</p>
            <p>View code:</p>
            <code lang="html">
              @Html.DevExpress().ImageZoom( settings => {
                  settings.Name = "imageZoom";
                  settings.ImageUrl = Url.Content("~/Content/ImageZoom/overview_151233002.jpg");
              }).GetHtml()
            </code>
           ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument17118" Title="Documentation" />
          <KeyFeature Name="Zoom Window Position and Size">
            <Description>
              <![CDATA[
               The Zoom Window can be displayed at any side (right, bottom, left, top) of the image. You can also change the size of the Zoomed Window. Note that in this case, the mouse box (the square area under the cursor) automatically changes its size as well.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Zoom Inside the Image">
            <Description>
              <![CDATA[
               The Zoom Window can be displayed within the image borders so that you can zoom inside the image. 
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Hint">
            <Description>
              <![CDATA[
               A hint can be displayed over the image to indicate that the image is zoomable. The hint can be text or an image or both.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Zoom and Expand Window Captions">
            <Description>
              <![CDATA[
               Provide individual text descriptions to be displayed within the expression's Zoom and Expand Windows.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Image Zoom Navigator">
            <Description>
              <![CDATA[
             A data-bound navigation bar that allows you to display images within the assigned ImageZoom extension. 
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features" SeoTitle="Main Features">
          <Description>
            <![CDATA[
              <p>The DevExpress ASP.NET MVC Image Zoom extension allows your end-users to view a magnified portion of a small image on mouse hover. 
              The extension consists of two parts: a small image (defined via the <b>ImageUrl</b> property) and a Zoom Window that pops up when an end-user hovers the mouse pointer above the small image.</p>
              <p>All of the options available in this demo are described below:</p>
              <ul>
                <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageZoomSettings_ShowHinttopic">ShowHint</helplink> - specifies whether or not hint text is displayed within the small image;</li>
                <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageZoomSettings_EnableExpandModetopic">EnableExpandMode</helplink> - enables the Expand Window, which displays a full-screen image when an end-user clicks the small image;</li>
                <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageZoomImageZoomZoomModeSettings_ZoomWindowPositiontopic">ZoomWindowPosition</helplink> - specifies the position of a Zoom Window;</li>
                <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageZoomImageZoomZoomModeSettings_MouseBoxOpacityModetopic">MouseBoxOpacityMode</helplink> - specifies whether the opacity effect should be applied inside the mouse box or outside it;</li>
                <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageZoomSettings_LargeImageLoadModetopic">LargeImageLoadMode</helplink> - specifies the large image’s load mode.</li>
              </ul>
            ]]>
          </Description>
        </Demo>
        <Demo Key="ImageZoomNavigator" Title="Image Zoom Navigator" SeoTitle="Image Zoom Navigator">
          <Description>
            <![CDATA[
              <p>This demo illustrates how to associate the <b>ImageZoom</b> extension with the <b>ImageZoomNavigator</b> extension. <b>ImageZoomNavigator</b> is a data extension that displays a set of thumbnails. Clicking a thumbnail opens a corresponding image within an associated <b>ImageZoom</b> extension. Small images and their large equivalents are defined via the ImageZoomNavigator's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageZoomNavigatorSettings_Itemstopic">Items</helplink> collection.</p>
              <p>All options available in this demo are described below:</p>
              <ul>
              <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageZoomNavigatorSettings_ActiveItemChangeActiontopic">ActiveItemChangeAction</helplink> - specifies whether an end-user should hover a particular item or click it to activate the corresponding image within the <b>ImageZoom</b> extension;</li>
              <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageZoomNavigatorSettings_NavigationButtonVisibilitytopic">NavigationButtonVisibility</helplink> - specifies whether navigation buttons should always be visible or only when the width of all items exceeds the width of the <b>ImageZoomNavigator</b> extension.</li>
              </ul>
            ]]>
          </Description>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="ImageSlider" Title="Image Slider" SeoTitle="ASP.NET MVC Image Slider Extension">
        <Overview Title="Overview">
          <Description>
            <![CDATA[
            <p>The touch-enabled DevExpress ASP.NET MVC Image Slider allows end-users to display and navigate images.</p>
            <p>To add an ImageSlider to your web application, define the extension within the view and define the folder from which the extension should retrieve images.</p>
            <p>View code:</p>
            <code lang="html">
              @model string
              @Html.DevExpress().ImageSlider(settings => {
                  settings.Name = "imageSlider";
              }).BindToFolder(Model).GetHtml()
            </code>
        ]]>
          </Description>
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8158" Title="Getting Started" />
          <SeeAlso Url="http://www.youtube.com/developerexpress" Title="Training Videos" />
          <SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument14979" Title="Documentation" />
          <KeyFeature Name="Binding to Data">
            <Description>
              <![CDATA[
             You can bind an ImageSlider to a data source so that your data items are retrieved from a folder, an XML file or an IEnumerable object.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Slide Show">
            <Description>
              <![CDATA[
             ImageSlider has the built-in ability to display an image slide show.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Support for Item Text">
            <Description>
              <![CDATA[
             You can enable the display of item text above the item.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Customizable Navigation Bar">
            <Description>
              <![CDATA[
             The navigation bar can be represented by dots or thumbnails.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Support for Binary Images">
            <Description>
              <![CDATA[
             ImageSlider allows you to display binary images.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Support for Keyboard ">
            <Description>
              <![CDATA[
             ImageSlider provides keyboard support for paging.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Template Technology">
            <Description>
              <![CDATA[
             Templates are fully supported. For each element within ImageSlider, you can customize the appearance or layout using any HTML content.
            ]]>
            </Description>
          </KeyFeature>
          <KeyFeature Name="Rich Client-Side Functionality">
            <Description>
              <![CDATA[
             A comprehensive client-side API is available for ImageSlider. This functionality, coupled with the ability to handle events on the client side, gives you full control over the extension's behavior on the client side.
            ]]>
            </Description>
          </KeyFeature>
        </Overview>
        <Demo Key="Features" Title="Features" SeoTitle="Image Slider Main Features" IsUpdated="true">
          <Description>
            <![CDATA[
                <p>
                The ImageSlider is an ASP.NET MVC extension used to display images and navigate among them. The extension supports three different ways to data bind: to a data source, loading images from a specified folder, or creating image items manually. Image thumbnails are created for you automatically or you can manually create them and increase the extension's performance.
                </p>
                
                <p>
                The ImageSlider extension consists of the image area and navigation bar. The both elements can be fully customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SettingsImageAreatopic">SettingsImageArea</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SettingsNavigationBartopic">SettingsNavigationBar</helplink> properties respectively.
                </p>
                
                <p>
                This demo allows you to set one of the predefined scenarios using the 'Predefined Scenarios' combo box. A scenario provide the presets properties that you can further customize using the options below the extension.
                </p>
                
                <p>
                <b>Image Area Settings</b>
                </p>
                
                <ul>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_ImageSizeModetopic">ImageSizeMode</helplink>. Allows you to specify how an image is fit to image area.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_AnimationTypetopic">AnimationType</helplink>. Contains a value specifying the animation type used to change images. If the slide animation type is used, images can be changed using the swipe gesture.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_NavigationDirectiontopic">NavigationDirection</helplink>. The direction of image sliding.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_ItemTextVisibilitytopic">ItemTextVisibility</helplink>. Specifies the visibility mode of the item text area.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_NavigationButtonVisibilitytopic">NavigationButtonsVisibility</helplink>. Specifies the visibility mode of image area navigation button.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_EnableLoopNavigationtopic">EnableLoopNavigation</helplink> - specifies whether or not the navigation order in either direction repeats in a loop.</li>
                </ul>
                
                
                <p>
                    <b>Navigation Bar Settings</b>
                </p>
                <ul>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_Positiontopic">Position</helplink>. This property allows to specify the position of navigation bar relative to image area.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_Modetopic">Mode</helplink>. Specifies the appearance of navigation bar items: dots or image thumbnails.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_ThumbnailsModeNavigationButtonVisibilitytopic">ThumbnailsModeNavigationButtonVisibility</helplink>. Specifies the visibility mode of navigation buttons within the navigation bar. This property is in effect for Thumbnails mode only.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_PagingModetopic">PagingMode</helplink> - Specifies how the navigation bar scrolls when an end-user clicks page navigation buttons.</li>
                </ul>
                
                
                <p>
                    <b>Behavior Settings</b>
                </p>
                
                <ul>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_EnablePagingGesturestopic">EnablePagingGestures</helplink>. This option specifies whether an end-user can switch pages with a swipe gesture.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_EnablePagingByClicktopic">EnablePagingByClick</helplink>. This option specifies whether paging by click is enabled.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_ImageLoadModetopic">ImageLoadMode</helplink>. This option specifies the image loading mode.</li>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_ExtremeItemClickModetopic">ExtremeItemClickMode</helplink> - Specifies the effect that is produced when an end-user clicks an extreme item.</li>
                </ul>
                
                
                <p>
                    <b>Appearance</b>
                </p>
                <ul>
                    <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_ShowNavigationBartopic">ShowNavigationBar</helplink>. This option specifies the navigation bar visibility.</li>
                </ul>
              ]]>
          </Description>
        </Demo>
        <Demo Key="PhotoGallery" Title="Photo Gallery" SeoTitle="Photo Gallery">
          <Description>
            <![CDATA[
                  <p>
                  This demo demonstrates how to create a photo gallery using the ImagerSlider.
                  </p>
                  <p>
                  Photos are displayed in a table using our DataView. Click a photo to open a popup window containing photo gallery. The gallery is implemented using the ImagerSlider extension. Users can view photos using the special navigation buttons or by swipe gesture within the image slider. Additionally, the demo demonstrates how to provide the key support for the gallery: press the Space to see the next photo or press the Escape to close the gallery and return to the data view table.
                  </p>
                  <p>
                  The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderScriptsASPxClientImageSlider_ActiveItemChangedtopic">ActiveItemChanged</helplink> client-side event is handled to add an anchor to the current image link. Thereby the demo shows how to create a link to the particular photo. So you can get the url to the current image from an address bar.
                  </p>
              ]]>
          </Description>
        </Demo>
        <Demo Key="FolderBinding" Title="Folder Binding" SeoTitle="Folder Binding">
          <Description>
            <![CDATA[
                  <p>
                  This demo demonstrates how you can use the ImagerSlider extension after specifying just one property. All you need to start working with our image slider is to pass the required folder path as a parameter to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderExtension_BindToFoldertopic">BindToFolder</helplink> property and the extension is ready for use. Images are scaled and thumbnails are created automatically.
                  </p>
              ]]>
          </Description>
        </Demo>
        <Demo Key="BindingToBinaryData" Title="Binding To Binary Data" SeoTitle="Binding To Binary Data">
          <Description>
            <![CDATA[
                  <p>The ImageSlider extension provides you with the ability to display binary images. In this demo, the ImageSlider is bound to data model via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderExtension_Bindtopic">Bind</helplink> method. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_ImageContentBytesFieldtopic">ImageContentBytesField</helplink> property specifies the data source field from which binary images should be retrieved. The ImageSlider extension caches the images to the folder specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_BinaryImageCacheFoldertopic">BinaryImageCacheFolder</helplink> property.</p>
              ]]>
          </Description>
          <SourceFile>~/Models/BinaryImages.cs</SourceFile>
        </Demo>
        <Demo Key="SlideShow" Title="Slide Show" SeoTitle="Slide Show and Ad Banner Rotator" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/ImageSlider.png" HighlightedTitle="Image Slider - Slide Show">
          <Description>
            <![CDATA[
                  <p>The ImageSlider has a built-in ability to display an image slide show. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SettingsSlideShowtopic">SettingsSlideShow</helplink> property provides access to the following properties.</p>
                  <ul>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_AutoPlaytopic">AutoPlay</helplink> – specifies whether or not the slide show is initially enabled.</li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_Intervaltopic">Interval</helplink> – specifies the time interval between changing images.</li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_PausePlayingWhenMouseOvertopic">PausePlayingWhenMouseOver</helplink> – specifies whether or not the image playing stops when mouse is over extension.</li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_PlayPauseButtonVisibilitytopic">PlayPauseButtonVisibility</helplink> – specifies the Play/Pause button visibility.</li>
                  <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_StopPlayingWhenPagingtopic">StopPlayingWhenPaging</helplink> – specifies whether or not the image playing stops when end-user change images manually.</li>
                  </ul>
                  <p>In this demo, you can use editors in the "Slide Show Settings" panel to play with the values of the properties above, so you can see them in action.</p>
              ]]>
          </Description>
          <HighlightedDescription>The touch-enabled Image Slider allows end-users to display and navigate images. ImageSlider provides built-in slide show functionality. This demo illustrates the main settings of the slide show.</HighlightedDescription>
        <SourceFile>~/Content/ImageSlider/SlideShow.css</SourceFile>
        </Demo>
        <Demo Key="NavigationBarMode" Title="Navigation Bar Mode" SeoTitle="Navigation Bar Mode">
          <Description>
            <![CDATA[
                <p>This demo illustrates how to use the image slider navigation bar as a standalone component. For this purpose, the image area is hidden by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_ShowImageAreatopic">ShowImageArea</helplink> property to <b>false</b>. Item thumbnails are customized using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SetItemThumbnailTemplateContenttopic">SetItemThumbnailTemplateContent</helplink> property, to display an image with a caption and serve as a link. The navigation buttons are displayed outside the thumbnail area by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_ThumbnailsNavigationButtonPositiontopic">ThumbnailsNavigationButtonPosition</helplink> property to <b>Outside</b>.</p>
                <p>In this demo, you can use the combo box to change the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_VisibleItemsCounttopic">VisibleItemCount</helplink> property value, which specifies the number of thumbnails displayed within the navigation bar.</p>
            ]]>
          </Description>
        <SourceFile>~/Content/ImageSlider/NavigationBarMode.css</SourceFile>
        </Demo>
        <Demo Key="VideoGallery" Title="Templates (Video Gallery)" SeoTitle="Templates (Video Gallery)">
          <Description>
            <![CDATA[
                  <p>The <b>ImageSlider</b> extension supports template technology, allowing you to completely customize an extension's appearance and layout.</p>
                  <p>The look of the <b>ImageSlider</b> extension's default elements can be completely modified by creating a specific template, which defines how an element will be rendered by a client browser. The <b>ImageSlider</b> extension allows you to create templates for the following elements: item, item text, and item thumbnail. You can apply templates for all identical elements within the extension (using extension level templates) or for a particular element (using item level templates).</p>
                  <p>In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SetItemTemplateContenttopic">SetItemTemplateContent</helplink> property is used to display video files within an extension image area. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SetItemThumbnailTemplateContenttopic">SetItemThumbnailTemplateContent</helplink> property is used to display information about items: text and time.</p>
              ]]>
          </Description>
        <SourceFile>~/Content/ImageSlider/VideoGallery.css</SourceFile>
        </Demo>
        <Demo Key="FullscreenSample" Title="Fullscreen Sample" SeoTitle="Fullscreen Sample">
          <Description>
            <![CDATA[
                  <p>This demo illustrates how to use the ImageSlider extension in a full-screen mode when an extension fills an entire page and can be resized together with the browser window. The client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_AdjustControltopic">AdjustControl</helplink> method is used to recalculate the size of the extension's client object to correctly display it when the window is resized.</p>
                  <p>Additionally, the demo illustrates the ability to customize the navigation dots and item text area using cascading style sheets.</p>
              ]]>
          </Description>
          <SourceFile>~/Views/ImageSlider/FullscreenSamplePage.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
    </DemoProduct>

    <DemoProduct Key="MultiUseExtensions" Url="MVCxMultiUseExtensionsDemos" Title="ASP.NET MVC Multi-Use Site Extensions" SeoTitle="ASP.NET MVC Multi-Use Site Extensions" NavItemTitle="Multi-Use Site Extensions" OrderIndex="12" IsMvc="true">
      <Keywords>useful, utils, misc</Keywords>

      <DownloadUrl>
        http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
      </DownloadUrl>

      <BuyUrl>
        http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
      </BuyUrl>

      <DocUrl>
        http://documentation.devexpress.com/#AspNet/CustomDocument7896
      </DocUrl>

      <IntegrationImageUrl>~/Content/MultiUse.png</IntegrationImageUrl>

      <Intro Title="Introduction" SeoTitle="ASP.NET MVC Multi-Use Site Extensions">
        <BannerTitle>
          Multi-Use Site Extensions for ASP.NET MVC
        </BannerTitle>
        <BannerText>
          A collection of multi-use extensions for ASP.NET MVC including the RatingControl, the Round Panel, and the Callback Panel (to update content dynamically via callbacks).
        </BannerText>
        <BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
        <BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>

        <DescriptionTitle>
          Welcome to the online demo site of the ASPxperience Suite
        </DescriptionTitle>
        <Description>
          <![CDATA[
              <p>
                  [TODO]This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>. 
                  These features include: 
              </p>
              ]]>
        </Description>
      </Intro>

      <DemoGroup Key="Common" Title="Support for AJAX Requests" SeoTitle="ASP.NET MVC Extensions - Support for AJAX Requests">
        <Demo Key="Callbacks" Title="jQuery Callbacks" SeoTitle="ASP.NET MVC Extensions - jQuery Callbacks" 
              HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Callbacks.png" HighlightedTitle="Support for jQuery AJAX callbacks">
          <Description>
            <![CDATA[
          <p>DevExpress MVC extensions fully support jQuery AJAX callbacks. This demo shows how to load partial views containing DevExpress MVC extensions within a jQuery ajax callback.</p>

            <p>The Menu extension contains three items. When the end-user selects an item from the menu, the OnSelectingMenuItem function is called. This function contains an ajax request, which causes the <b>&lt;div&gt;</b> container to be updated with the rendered DevExpress MVC extension from the partial view.</p>

            <p>Ajax requiest settings:</p>
            <ul>
            <li><b>data</b> - defines the data to be sent on the server. In this demo, the selected menu item name is sent to the server.</li>
            <li><b>beforeSend</b> - defines a pre-request callback function. In this demo, the pre-request callback function invokes loading panel.</li>
            <li><b>success</b> - defines a function to be called if the request succeeds. In this demo, the called function hides the loading panel and puts the rendered extension code into the required container.</li>
            </ul>
            <p>You can find more available settings here: <a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() &#8211; jQuery API</a>.</p>
          ]]>
          </Description>
          <HighlightedDescription>DevExpress MVC extensions fully support jQuery AJAX callbacks. This demo shows how to load partial views containing DevExpress MVC extensions within a jQuery ajax callback.</HighlightedDescription>
          <SourceFile>~/Views/Common/CallbacksCalendarPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Common/CallbacksDataMiningPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Common/CallbacksVisualizationPartial.cshtml</SourceFile>
        </Demo>
        <Demo Key="AjaxActionLink" Title="Ajax ActionLink" SeoTitle="ASP.NET MVC Extensions - Ajax ActionLink">
          <Description>
            <![CDATA[
            <p>DevExpress MVC Extensions support the <b>Ajax.ActionLink()</b> helper method.</p>
            <p>The <b>Ajax.ActionLink()</b> helper method returns an anchor element that contains the URL to the specified action method; when the action link is clicked, the action method is invoked asynchronously by using JavaScript.</p>
            <p>In this demo, the <b>Ajax.ActionLink()</b> is used to render a link that allows end-users to load information about the GridView item's category.</p>
            <p>You can learn more about the <b>Ajax.ActionLink()</b> helper from MSDN Reference: <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx">AjaxExtensions.ActionLink Method</a>.</p>
          ]]>
          </Description>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/Common/AjaxActionLinkPartial.cshtml</SourceFile>
          <SourceFile>~/Views/Common/AjaxActionLinkCategoryPartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="CallbackPanel" Title="Callback Panel" SeoTitle="ASP.NET MVC Callback Panel Extension">
        <Demo Key="Example" Title="Example" SeoTitle="MVC AJAX Container" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/CallbackPanel.png" HighlightedTitle="Callback Panel - Example">
          <Description>
            <![CDATA[
                    <p>
                        This demo illustrates the ease with which you can update page content in response to client-side events via callbacks.
                    </p>
                    <p>
                        With the MVC Callback Panel, updating page contents (including our extensions) via callbacks is no longer a tedious task. To simplify things, this extension offers unified callback management, allowing its child elements to be updated in one shot. In addition, the Callback Panel extension provides a built-in Loading Panel and Loading Div elements that provide visual feedback whenever a callback is processed. You can customize the appearance of these elements as your needs dictate by using the extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagesBase_LoadingPaneltopic.aspx">Images.LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCallbackPanelSettings_LoadingPanelImagePositiontopic.aspx">LoadingPanelImagePosition</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxCallbackPanelCallbackPanelStyles_LoadingPaneltopic.aspx">Styles.LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCallbackPanelSettings_LoadingPanelTexttopic.aspx">LoadingPanelText</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxCallbackPanelCallbackPanelStyles_LoadingDivtopic.aspx">Styles.LoadingDiv</helplink> properties.
                    </p>
                    <p>
                        In this demo, the Callback Panel extension (see the "ExamplePartial" partial view) contains elements that are used to display personal information on an employee selected within a list box. The Callback Panel's contents are updated on a callback - initiated by the list box's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsEditClientSideEvents_ValueChangedtopic.aspx">ValueChanged</helplink> client-side event handler. The callback routing logic is specified via the panel's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxListBox_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property. Here's how it works. When the selected employee is changed, the panel's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_PerformCallbacktopic.aspx">PerformCallback</helplink> client method is called, passing the selected employee's ID as its parameter. The model is then updated with the employee information that corresponds to the passed ID (see the GetEmployee function). As a result, the CallbackPanel's content is updated with the newly retrieved employee information.
                    </p>
                ]]>
          </Description>
          <HighlightedDescription>The Callback Panel extension allows you to partially update a web page without performing a full postback. CallbackPanel is useful for extensions that do not have built-in callback functionality. This demo illustrates how it can be used to display detailed employee information that changes dynamically when clicking on a name in the employee list box.</HighlightedDescription>
          <SourceFile>~/Models/Northwind.cs</SourceFile>
          <SourceFile>~/Views/CallbackPanel/ExamplePartial.cshtml</SourceFile>
        </Demo>
      </DemoGroup>
      <DemoGroup Key="RatingControl" Title="Rating Control" SeoTitle="ASP.NET MVC Rating Control">
        <Demo Key="DataBinding" Title="Data Binding" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/RatingControl.png" HighlightedTitle="Rating Control - Data Binding">
          <Keywords>databinding, rating</Keywords>
          <Description>
            <![CDATA[
                <p>This demo illustrates how the <b>RatingControl</b> extension can be used to visualize data from a data source.</p>
                <p>In this demo, the RatingControl extension is used in read-only mode (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_ReadOnlytopic">ReadOnly</helplink> property is set to <b>true</b>). RatingControl is placed within the items of the DataView extension bound to an XML file. RatingControl is bound to a "Value" data source field via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlExtension_Bindtopic">Bind</helplink> method.</p>
            ]]>
          </Description>
          <HighlightedDescription>The DevExpress RatingControl Extension for ASP.NET MVC allows end-users to rate content by clicking icons such as stars. This demo illustrates how RatingControl is used to display ratings from a data source.</HighlightedDescription>
          <SeeAlso Url="http://www.youtube.com/watch?v=7z2qfO_pT2E" Title="DevExpress ASP.NET MVC: The RatingControl Extension" />
        </Demo>
        <Demo Key="Voting" Title="Voting">
          <Keywords>votes, survey, rating</Keywords>
          <Description>
            <![CDATA[
                <p>The RatingControl extension is used to visualize end-user ratings. It also provides end-users with an intuitive interface to rate content by allowing them to select item images ("stars" by default) that represent the user’s rating.</p>
                <p>RatingControl allows you to specify the following:</p>
                <ul>
                    <li>its value (via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlExtension_Bindtopic">Bind</helplink> method);</li>
                    <li>the number of items (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_ItemCounttopic">ItemCount</helplink> property);</li>
                    <li>an image representing an individual item in different states (such as <i>normal</i>, <i>highlighted</i> or selected) by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_ImageMapUrltopic">ImageMapUrl</helplink> property, along with the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_ItemWidthtopic">ItemWidth</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_ItemHeighttopic">ItemHeight</helplink> properties;</li> 
                    <li>the titles of items (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_Titlestopic">Titles</helplink> property);</li>
                    <li>the manner in which items are filled to represent the extension's value, if it is a fractional number (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_FillPrecisiontopic">FillPrecision</helplink> property).</li> 
                </ul>
                <p>The following fill types are available within the RatingControl extension, controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRatingControlSettings_FillPrecisiontopic">FillPrecision</helplink> property:</p>
                <ul>
                    <li>Full - An item is fully filled if the decimal part of the extension's value is in the 50-99 range. </li>
                    <li>Half - An item is half filled if the decimal part of the extension's value is in the 25-74 range. </li>
                    <li>Exact - An item is filled according to the exact decimal part of the extension's value. </li>
                </ul>
                <p>On the client side, RatingControl implements a set of client events (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemClicktopic">ItemClick</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemMouseOvertopic">ItemMouseOver</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemMouseOuttopic">ItemMouseOut</helplink> events), allowing you to respond when end-users manipulate the extension.</p>
                <p>In this demo, the RatingControl extension is used to implement a simple voting system that allows an end-user to submit a vote once, by selecting the desired number of stars (an end-user can resubmit his/her choice by repeating the selection process, and selecting another number of stars).</p>
                <p>Technically, this is implemented as follows. The second RatingControl's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemClicktopic">ItemClick</helplink> event is handled to initiate a callback sending the value obtained via the extension's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_GetValuetopic">GetValue</helplink> client method to the server. This value is used on the server to calculate the overall rating value. The calculated value is then sent back to the client and assigned to the first RatingControl using its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_SetValuetopic">SetValue</helplink> client method.</p>
                <p>You can also select an item from the drop-down list to specify the fill type of the second extension. Notice how the second extension's items are filled based on the extension's value.</p>
            ]]>
          </Description>
        </Demo>
      </DemoGroup>
        <DemoGroup Key="RoundPanel" Title="Round Panel" SeoTitle="ASP.NET MVC Rounded Panel" IsUpdated="true">
            <Keywords>radius, round, borderradius, panel, window</Keywords>
            <Demo Key="Features" Title="Features" IsUpdated="true" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/RoundPanel.png" HighlightedTitle="Round Panel - Features">
                <Description>
                    <![CDATA[
                        <p>The DevExpress ASP.NET MVC Round Panel extension is a container area with rounded corners. This demo illustrates the primary features of RoundPanel. Use the options in the right panel to change the values of corresponding extension properties, and view the result within the extension.</p>
                        <p>The descriptions of the properties utilized are listed below:</p>
                        <ul>
                            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRoundPanelSettings_Viewtopic">View</helplink> – Specifies the round panel view: Standard or GroupBox. Note that the collapse functionality is available only for the Standard view.</li>
                            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRoundPanelSettings_ShowHeadertopic">ShowHeader</helplink> – Specifies the panel header visibility.</li>
                            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRoundPanelSettings_AllowCollapsingByHeaderClicktopic">AllowCollapsingByHeaderClick</helplink> – Specifies whether an end-user can expand and collapse a panel by clicking the panel header.</li>
                            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRoundPanelSettings_ShowCollapseButtontopic">ShowCollapseButton</helplink> – Specifies whether or not a collapse button is displayed in a panel header.</li>
                            <li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRoundPanelSettings_EnableAnimationtopic">EnabledAnimation</helplink> – Specifies whether or not a slide animation effect is used when expanding or collapsing the panel.</li>
                        </ul>
                    ]]>
                </Description>
                <HighlightedDescription>The DevExpress ASP.NET MVC Round Panel extension allows you to display an element with rounded corners. This demo illustrates how the RoundPanel can have a custom appearance, as well as its different styles</HighlightedDescription>
            </Demo>
            <Demo Key="LoadOnDemand" IsNew="true" Title="Load Content on Demand" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/RoundPanel.png" HighlightedTitle="Round Panel - Load Content On Demand">
                <Description>
                    <![CDATA[
                        <p>The DevExpress ASP.NET MVC Round Panel extension has the capability to load panel content on demand via callbacks.</p> 
                        <p>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcRoundPanelSettings_LoadContentViaCallbacktopic">LoadContentViaCallback</helplink> property allows you to specify when the content of an initially collapsed panel should be loaded. If the property is set to <b>true</b>, a collapsed panel's content is loaded on initial expansion, otherwise a collapsed panel's content is loaded initially. Using postponed loading of panel content, you can improve the response time of your web page on its initial load.</p>
                        <p>A round panel’s content can be updated on demand programmatically, using the client-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRoundPanelScriptsASPxClientRoundPanel_PerformCallbacktopic">PerformCallback</helplink> method.</p> 
                        <p>Note that in this example, callback processing is intentionally paused on the server side for two seconds in order to make the Loading Panel visible during this time.</p>
                    ]]>
                </Description>
                <HighlightedDescription>The DevExpress ASP.NET Round Panel (ASPxRoundPanel) allows you to load Content on CollapsedChanged event.</HighlightedDescription>
                <SourceFile>~/Views/RoundPanel/LoadOnDemandPartial.cshtml</SourceFile>
                <SourceFile>~/Views/RoundPanel/RoundPanelContent.cshtml</SourceFile>
            </Demo>
        </DemoGroup>
    </DemoProduct>
    
  
    <Search>
        <Synonyms>
            <Group>datasource, databinding, binding, database, databind</Group>
            <Group>grid, gridview, gridviewcontrol, aspxgridview</Group>
            <Group>eXpress, Persistent, xpo</Group>
        </Synonyms>
        <Exclusions>
            <Words>devexpress, dx, asp, devex, asp.net, demo, demos, web</Words>
            <Prefixes>aspx, asp, xtra, client, dx, web, mvcx</Prefixes>
            <Postfixes>s, ing, control, e</Postfixes>
        </Exclusions>
    </Search>

    <GlobalHeader LogoPlatformSubject="ASP.NET MVC" LogoPlatformDescription="THE WEB, YOUR WAY"/>
</Demos>
